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

时间:2021-04-25 20:06:35

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

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。

质量不咋的,请指教。