欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

自我总结和学习表单提交的几种方式 (二)

程序员文章站 2022-04-10 15:33:35
表单提交感觉项目中用到的次数越来越多了,但是遇到的问题也越来越多,使用的解决方式也层出不齐,利用周末时间,自己学习学习,然后继续总结下几种表单提交的方式。 【4】传统submit提交方式拦截,改造成ajax提交 【5】利用已有JS插件进行表单提交 利用JS插件进行提交时,会有两种形式的插件,一种是先 ......

表单提交感觉项目中用到的次数越来越多了,但是遇到的问题也越来越多,使用的解决方式也层出不齐,利用周末时间,自己学习学习,然后继续总结下几种表单提交的方式。

【4】传统submit提交方式拦截,改造成ajax提交

<form id="form" enctype="multipart/form-data">
    <label for="name">姓名:</label>
    <input type="text" id="name" data-bind="value:vm.name" /><br />
    <label for="address">住址:</label>
    <input type="text" id="address" data-bind="value:vm.address" /><br />
    <label for="tel">手机号:</label>
    <input type="text" id="tel" data-bind="value:vm.tel" /><br />
    <input type="submit" value="添加" />
</form>
    $("#form").submit(function () {
        var model = ko.mapping.toJS(vm.entity);
        $.ajax({
            url: '@Url.Action("AddCustomInfo")',
            type: this.method,
            dataType: "Json",
            data: { fileInfo: model },
            success: function (data) {
                if (data.result) {
                    layer.alert("添加成功!");
                    $("#myModal").modal("hide");//隐藏弹框
                }
            }
        });
        return false;//阻止表单提交
    });

【5】利用已有JS插件进行表单提交

利用JS插件进行提交时,会有两种形式的插件,一种是先异步上传文件,然后再提交表单,并不是一并提交,另一种是一并把文件提交给后台进行接收。

举几个例子是利用先提交文件方式的:

如:layui.upload 

自我总结和学习表单提交的几种方式 (二)

再有 elementUI也是先要提交文件到服务器,然后其它信息随后提交过来,当然element有一个DataList属性可以随带一些需要的数据,那也是不错的方式

此处我就不粘贴代码了...偷个懒

 

【6】jQuery表单插件

这种方式在很多地方见到了

利用的是拦截submit,然后将表单中的所有信息提交到后台,需要注意的是,这必须得保证要填写信息的html元素必须要由name ,这是根据name进行后台模型转换的依据,至少来讲在asp.net mvc中是必须的。

操作的步骤就是首先下载jquery.form.js包,当然的前提是jquery.js包必须存在,这像一句废话,哈哈

表单写好后,在js代码中,

    $("#form").submit(function () {
        $(this).ajaxSubmit(function () {
            //执行你想要的回调函数
        });
        return false;//阻止表单默认提交
    });
    //或是
    $("@form").ajaxForm(function () {
        //执行你想要的回调函数
    });

ajaxForm()和ajaxSubmit()都可以接受0个或一个参数,接受一个参数可以是回调函数也可以是一个options对象。具体信息可以参见其它博友的文章

options对象中包含了很多参数,通过设置这些参数,可以将我们需要的限制,信息,函数一并设置好,然后

    $("#form").submit(function () {
        $(this).ajaxSubmit(options);
        return false;//阻止表单默认提交
    });
    //或者
    $("#form").ajaxForm(options);

 

【7】利用H5新功能 FormData

这个对象将我们需要提交的属性信息囊括其中,然后以表单形式提交给后台,是相当方便的形式,同样强大到可以将多文件进行后台提交

这种情形下面我们不需要一个特定的submit按钮甚至是说完全抛弃form表单的概念,最终将需要提交的信息直接加入到formData对象中即可

    $("#add").click(function () {
        var formData = new FormData();
        formData.append("file", document.getElementById("file").files[0]);
        formData.append("name", vm.name());
        formData.append("address", vm.address());
        formData.append("tel", vm.tel());

        $.ajax({
            url: '@Url.Action("addCustomInfo")',
            type: 'Post',
            dataType: "Json",
            processData: false,
            contentType: false,
            data: formData,
            success: function (data) {
                if (data.result) {
                    layer.alert("添加成功!");
                    $("#myModal").modal("hide");//隐藏弹框
                }
            }
        });
    });

注意这里的append(属性名,属性值);其中属性名需要和后台接收参数名需要对应,这是表单提交的前提,并且ajax中需要设置contentType为false,processData为false,记得上次我备注了这两个属性是由于浏览器的差异,如此做可以屏蔽浏览器差异性,当然formData是新特性,需要IE10以上才能支持了

 

该想的都想完了,也总结完了,如有更多好的方式,请和我分享,我也想学习更多东西。哈哈。知识是个好东西。

 

 

2017-12-08,望技术有成后能回来看见自己的脚步。