jQuery.form.js 详细用法_维护老项目使用

概述

jquery-3.3.1.min.js ： http://jquery.com/download

jquery.form.min.js ：http://malsup.com/jquery/form/#tab7

jquery form 是一个表单异步提交的插件，可以很容易提交表单，设置表单提交的参数，并在表单提交前对表单数据进行校验和处理和表单提交后的函数调用。

表单代码：

<form id="form1" method="get" action="/day09/jqueryFormServlet">
    姓名:<input ><br>
    年龄:<input ><br>
    地址:<input ><br>
    兴趣:<p>
    h1:<input type="checkbox" >
    h2:<input type="checkbox" >
    h3:<input type="checkbox" >
    h4:<input type="checkbox" >
        </p>
    性别:
    男:<input type="radio" ><br>
    女:<input type="radio" ><br>
    <input type="submit" value="submit1" id="sub1">
    <input type="submit" value="submit2" id="sub2">

    <div id="p1">p</div>
</form>

这个插件有两个主要方法：

ajaxForm() 和 ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进程的功能；

他们都可以接受 0 个或一个参数，参数可以为一个函数或者一个 JS 对象，类似 json 格式；

ajaxForm（）不能提交表单，只是为表单提交做准备：

①：传入函数

$("#form1").submit(function () {
    $('#form1').ajaxForm(function () {
        alert("提交成功2")
    })
})

但是虽然我看了很多博客都是这样写，我实际代码运行之后发现，“提交成功2”并没有打印，也就是函数没有进去，

而且提交后，页面会跳转到 action 的地址，也就是说，这个方法不能实现表单的异步提交，只是为表单提交做准备，但传入一个函数的方式不适合这个方法，因为没有进去，不知道是不是我写的有问题。但是如果传入一个 option 是对象，就能生效。

var options = {
    url: "/day09/jqueryFormServlet", //提交地址：默认是form的action,如果申明,则会覆盖
    type: "post",   //默认是form的method（get or post），如果申明，则会覆盖
    beforeSubmit: beforeCheck, //提交前的回调函数
    success: successfun,  //提交成功后的回调函数
    target: "#output",  //把服务器返回的内容放入id为output的元素中
    dataType: "json", //html(默认), xml, script, json...接受服务端返回的类型
    clearForm: true,  //成功提交后，是否清除所有表单元素的值
    resetForm: true,  //成功提交后，是否重置所有表单元素的值
    timeout: 3000     //限制请求的时间，当请求大于3秒后，跳出请求
};

②：传入一个 js 对象

$('#form1').ajaxForm(options)

ajaxSubmit（）方法：实现表单的异步提交

$("#form1").submit(function () {
    $('#form1').ajaxSubmit(function () {
        alert("提交成功2")
    })

    return false;
})

这里必须返回 false，不然表单会提交两次，因为异步提交一次，默认提交一次；

$('#form1').ajaxSubmit(options)

但如果传入 options 对象则只会提交一次，目前我不知道什么原理。

//表单提交前，数据校验
/*
 * formData：表单元素数组对象，数组里面每一个元素都是一个<input>元素，可以通过.name、.value的方式访问元素
 * 提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
 * form: jQuery对象，封装了表单的元素
 * options: options对象
 * */
function beforeCheck(formData, form, options) {

    //利用formData校验
    //$.param(formData) 可以和formSerialize方法一样，实现表单元素的序列化
    var queryString = $.param(formData);
    $("#p1").html(queryString + "<br>")

    for (var i = 0; i < formData.length; i++) {
        //打印每一个元素的name属性和value值
        //alert(formData[i].name + "  " + formData[i].value)
    }

    //利用form校验
    var formDom = form[0];

    //formDom是jQuery表单对象，感觉类似数组，可以通过下标访问元素
    //比如：formDom[0].targetName 表示元素标签名，INPUT
    var name = formDom["name"].value;//这里寻找name为name或者id为name的元素的值
    var age = formDom["age"].value;

    alert(name+"  "+age)
    if (!name || !age) {
        alert("name age 不能为空")
    }

    //利用fieldValue校验
    //返回选择元素的value值，是一个数组
    var name = $("input[name='name']").fieldValue();
    var hobby = $("input[name='hobby']").fieldValue();
    if (!name[0] || !hobby[0]) {
        alert("必须填姓名和选择兴趣")
    }

    //把表单的元素序列化，：name=姓名&age=年龄；以字符串的方式拼接所有表单元素
    var formSerializeStr = $("#form1").formSerialize();
    alert(formSerializeStr)
    //序列化某些表单元素 $("#form1 .ss")通过选择器选择某些元素
    //这里就是选择表单里面，有specialFields样式的元素；但是这里我用属性选择器没有生效，比如$("#form1[name='name']")
    var formSerializeStr = $("#form1 .specialFields").fieldSerialize();
    alert(formSerializeStr)


    return true;//如果return false，则校验不通过，表单不会提交
}

function successfun(data, status) {
    //data是提交成功后的返回数据，status是提交结果 比如success
    //返回数据的类型是通过options对象里面的dataType定义的，比如json、xml，默认是html

    //这里data.success是因为我后天返回的json数据的一个属性 String jsonText = "{'success':'提交成功'}";
    alert(data.success + "  " + status)
}

一、jQuery.Form.js 配置选项 options

选项	说明
url	表单提交数据的地址
type	form 提交的方式 (method:post/get)
target	服务器返回的响应数据显示在元素 (Id) 号
beforeSerialize: function($form, options)	表单数据被序列化之前执行的回调函数，如果在内部 return false 将终止序列化和提交。
beforeSubmit: function(arr, $form, options)	表单数据被序列化成 arr 数组，并且在提交前触发的回调函数。
error	提交失败执行的回调函数
success	提交成功后执行的回调函数
data	除了表单数据外，还需要额外提交到服务器的数据
iframe	如果有 <input type="file"> 是否应该使用 iframe 来上传文件 (对旧版本浏览器而言)
iframeSrc	为 <iframe> 元素设定 src 属性值
iframeTarget	如果你想用自己的 iframe 来上传文件，可以将 Id 传给这个属性
dataType	期望服务器返回数据类型
clearForm	提交成功后是否清空表单中的字段值
restForm	提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态
timeout	设置请求时间，超过该时间后，自动退出请求，单位 (毫秒)
forceSync
semantic
uploadProgress

二、可操作函数

函数	说明
ajaxForm	提交表单与 ajaxSubmit 的区别在于是否触发浏览器的提交。
ajaxSubmit	提交表单
formSerialize	序列化表单
fieldSerialize	序列化字段
fieldValue	返回某个 input 的字段值
resetForm	重置表单为打开页时的状态
clearForm	清空表单的所有值
clearFields	清空某个字段值