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 表示元素标签名，INPUTvar 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

二、可操作函数

HBuilder教程