初入前端,网上找的很多资料都不够详细,导致遇到很多问题,现记录如下:

1.首先引入

<script src="~/Scripts/jquery-1.10.2.js"></script>

<script src="~/Scripts/jquery.form.js"></script>

这个两个 脚本库,src属性为路径,注意顺序,form为jQuery的一个子库,因此放在后面。

2.js冲突。

我是在mvc下开发,引入库后运行提示ajaxSubmit函数找不到,ie会直接报异常,百度浏览器不会报异常,需要进入浏览器调试模式下发现。

百度了很久,多数都是说没有引入form库,也有少数的人说是由于js库冲突所致,子页面中引入的js库与母版页或布局页引入的js库冲突,没有找到明确的解决办法,

遂到布局页查看引入了哪些js库,查看到布局页中使用

    @Scripts.Render("~/bundles/modernizr")

读取js文件,又查找相关资料发现,如果要在子页面引入其它js文件,应该使用下面方式,

@section scripts
        {
            <script src="~/Scripts/jquery.form.js"></script>
        }

放在@section scripts块中。

3.刷新问题,这个问题是由于提交按钮type设置为submit导致,本身submit会自动执行当前视图的默认控制器方法,而又在按钮的单击事件中执行提交,从而进行刷新。

切记,使用ajaxSubmit等其它方式提交时,input标签type一定设置为button,不然多此一举。

4.ajaxSubmit没有提交,没有跳转到相应的控制器方法。
最开始使用的js代码:

function AddPicture_Click() {

var options = {
            url: "/GraphicPublicize/Add", // 要调用的控制器方法
            type: "post",
            data: {
                "typeName": $("#type_list").find("[class='type_list_selected']").text(),
            }, // 传递的数据
            beforeSubmit: ValidationBeforeSubmit, // 提交之前的回调函数
            success: ResponseAfterSuccess, // 提交之后返回的回调函数

};
        jQuery('#Form').submit(function () {
        $("#Form").ajaxSubmit(options);
            return false;
        });

return;
    }

此函数绑定到按钮的单击事件上。此方式无效,跟踪js明明执行了,但是回调函数和后端代码都没有执行。

之后改为:

function AddPicture_Click() {

var options = {
            url: "/GraphicPublicize/Add", // 要调用的控制器方法
            type: "post",
            data: {
                "typeName": $("#type_list").find("[class='type_list_selected']").text(),
            }, // 传递的数据
            beforeSubmit: ValidationBeforeSubmit, // 提交之前的回调函数
            success: ResponseAfterSuccess, // 提交之后返回的回调函数

};
       // jQuery('#Form').submit(function () {            // 屏蔽这几行代码
        $("#Form").ajaxSubmit(options);
          //  return false;
        //});

return;
    }

  遂执行提交成功,什么原因我也不晓得。

5.传递数据问题,网上说照这样是可以传的,

var options = {
            url: "/GraphicPublicize/Add", // 要调用的控制器方法
            type: "post",
            data: {
                "typeName": $("#type_list").find("[class='type_list_selected']").text(),
            }, // 传递的数据
            beforeSubmit: ValidationBeforeSubmit, // 提交之前的回调函数
            success: ResponseAfterSuccess, // 提交之后返回的回调函数

};

实测不行,还有说jquery.form.js文件源码不全,建议重新下载,还是不行,不知原因,又发现request中的param集合中有我需要的数据就没管了。
    关于ajaxSubmit可另行参考http://www.cnblogs.com/Leo_wl/p/4393190.html#undefined。

质量不咋的,请指教。

使用jQuery.form库中ajaxSubmit提交表单时遇到的一些问题的更多相关文章

  1. jquery.form插件中动态修改表单数据

    jquery.form jquery.form插件(http://malsup.com/jquery/form/)是大家经常会用到的一个jQuery插件,它可以很方便将表单转换为ajax的方式进行提交 ...

  2. jquery通过submit()和serialize()提交表单

    <script type="text/javascript"> $(function() { $('#form1').submit(function() { //当提交 ...

  3. JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验

    1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...

  4. Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  5. 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

    $(function () { var wait = $("<img src=\"\" alt=\"正在上传\"/>"); $( ...

  6. Ajax提交表单时验证码自动验证 php后端验证码检测

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  7. Django:提交表单时遇到403错误:CSRF verification failed

    Django:提交表单时遇到403错误:CSRF verification failed 问题: 提交表单时遇到403错误:CSRF verification failed 解决方案: 在表单界面ht ...

  8. php提交表单时如何保留多个空格及换行的文本样式

    需求是:用户提交表单时屏蔽敏感词的功能.其中敏感词来自服务器端同一路径下的ciku.txt,敏感词通过"|"连接,例如"g|c|a",提交表单时替换敏感词,更重 ...

  9. php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别

    if(isset($_POST['submit'])) 它的意思是不是判断是否配置了$_POST['submit'] 这个变量呢?如果有这个变量 在执行其它代码 应该这样用if(isset($_POS ...

随机推荐

  1. linux常用技能

    阿里云镜像图形界面克隆虚拟机 linux替换阿里云镜像 centos6.6安装图形界面 克隆虚拟机后网络问题 linux替换阿里云镜像 第一步:备份你的原镜像文件,以免出错后可以恢复. cp /etc ...

  2. c#串口编程(转)

    在单片机项目开发中,上位机也是一个很重要的部分,主要用于数据显示(波形.温度等).用户控制(LED,继电器等),下位机(单片机)与 上位机之间要进行数据通信的两种方式都是基于串口的: USB转串口 — ...

  3. 20175226 2018-2019-2 《Java程序设计》第五周学习总结

    20175226 2018-2019-2 <Java程序设计>第五周学习总结 教材学习内容总结 接口 包含接口声明和接口体 接口声明interface 接口的名字 接口体中包含常量的声明( ...

  4. MQTT初步使用

    环境搭建 1.mosquitto所需要的rpm包 2.c-ares-1.12.0 3.安装最新的openssl版本 4.mosquitto-1.4.10 mosquitto需要的rpm包 c-ares ...

  5. SVG初尝试之path

    命令汇总 命令基本规律 移动和直线命令 弧线命令

  6. MYSQL 单表一对多查询,将多条记录合并成一条记录

    一.描述: 在MySQL 5.6环境下,应工作需求:将一个表中多条某个相同字段的其他字段合并(不太会表达,有点绕,直接上图) 想要达到的效果: 实现SQL语句: SELECT a.books, GRO ...

  7. 1024 Python 要诀

    在medium看到一篇好文,给初学者的Python小技巧,非常实用,可以用在你的程序中,代码瞬间变得高大上,看起来还有Pythonic 的感觉,Talk is cheap show me the co ...

  8. js中数组对象去重的方法

    var arr = [{ key: '01', value: '乐乐' }, { key: '02', value: '博博' }, { key: '03', value: '淘淘' },{ key: ...

  9. 学习HTML5, Canvas及简单动画的使用

    通过在CSDN中的一些简单课程学习,跟随老师联系,做了如下的月亮,太阳和地球的运动效果.纪录在文章中,用于下次使用. 准备工作如下: 1. 使用三张背景图片 太阳 月亮 地球 2. 在HTML页面中定 ...

  10. Centos安装Consul微服务

    一.简介 Consul([ˈkɒnsl],康搜)是注册中心,服务提供者.服务消费者等都要注册到Consul中,这样就可以实现服务提供者.服务消费者的隔离.除了Consul之外,还有Eureka.Zoo ...