使用jQuery.form库中ajaxSubmit提交表单时遇到的一些问题

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

1.首先引入

这个两个脚本库，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() {

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

return;
}

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

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

};

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

质量不咋的，请指教。

秒客网

使用jQuery.form库中ajaxSubmit提交表单时遇到的一些问题

相关文章