jQuery.form开发手记

Posted 2020-06-16

 

介绍
使用
API说明
ajaxForm
ajaxSubmit
fieldSerialize
resetForm
clearForm
clearFields
参数示例

一般情况下其实提交表单我们将数据$("form").serialize()序列化之后用$.ajax，$.post就可以实现，但是jQuery自带的方法仅支持异步提交数据，但不支持文件上传，除非我们自己用XMLHttpRequest写一个方法。
好在jquery.form.js自己实现了一套ajax的方法，支持异步文件上传并获取响应结果，这才是我使用jQuery.form的主要原因。
当然，小文件你也可以将其base64序列化，以字符串方式回传服务器，而不使用这个插件

---

介绍

jQuery Form插件能够让我们非常方便的实现form表单的AJAX异步提交，并且可以完全自定义提交的数据！

官网：http://plugins.jquery.com/form/
github：https://github.com/malsup/form
文档：http://jquery.malsup.com/form/

---

使用

1、引用JS

1. <script src="./jquery.js"></script>
2. <script src="./jquery.form.js"></script>

2、声明表单

1. <formid="myForm"action="comment.php"method="post">
2. Name: <inputtype="text"name="name"/>
3. Comment: <textareaname="comment"></textarea>
4. <inputtype="submit"value="Submit Comment"/>
5. </form>

3、ajax提交

1. $(document).ready(function(){
2. // bind ‘myForm‘ and provide a simple callback function
3. $(‘#myForm‘).ajaxForm(function(){
4. alert("Thank you for your comment!");
5. });
6. });

---

API说明

ajaxForm

并不会提交Form，在document的ready函数中通过给指定form添加事件监听使其成为AJAX异步表单。

1. $(‘#myFormId‘).ajaxForm();

ajaxSubmit

立即通过AJAX提交表单，一般是用来替换绑定表单的提交事件

1. //绑定submit事件
2. $(‘#myFormId‘).submit(function(){
3. //异步提交
4. $(this).ajaxSubmit();
5. // return false 用来阻止浏览器的提交与跳转
6. returnfalse;
7. });

fieldSerialize

和$.serialize大同小异，序列化表单数据

1. var queryString = $(‘#myFormId .specialFields‘).fieldSerialize();

resetForm

将表单恢复到初始状态。

1. $(‘#myFormId‘).resetForm();

clearForm

清除表单元素。该方法将所有的text、password、textarea置空，清除select元素中的选定，以及所有radio按钮和checkbox按钮重置为非选定状态。

1. $(‘#myFormId‘).resetForm();

clearFields

清除字段元素。只有部分表单元素需要清除时方便使用。

1. $(‘#myFormId .specialFields‘).clearFields();

---

参数示例

var options = {
    data: { key1: ‘value1‘, key2: ‘value2‘ }, //连同表单一起提交的额外数据
    target:        ‘#output1‘,   // 把服务器返回的内容放入id为output的元素中
    beforeSerialize: function($form, options) {
       // return false to cancel submit                
    },
    beforeSubmit:  showRequest,  // pre-submit callback
    success:       showResponse,  // post-submit callback
    error: function(){},//在错误中调用的回调函数。
 
    //other available options:
    url:       url        //默认是form的action，如果申明，则会覆盖
    type:      type        // 默认值是form的method("GET" or "POST")，如果声明，则会覆盖
    dataType:  null       // null（默认）、xml、script、json接受服务器端返回的类型
    clearForm: true        // 成功提交后，清除所有表单元素的值
    resetForm: true        // 成功提交后，重置所有表单元素的值
 
    //超时时间
    timeout:   3000
};

// pre-submit callback
function showRequest(formData, jqForm, options) {
    // The array of form data takes the following form:
    // [ { name: ‘username‘, value: ‘jresig‘ }, { name: ‘password‘, value: ‘secret‘ } ]
    // formData is an array; here we use $.param to convert it to a string to display it
    // but the form plugin does this for you automatically when it submits the data
    var queryString = $.param(formData);
 
    // jqForm is a jQuery object encapsulating the form element.  To access the
    // DOM element for the form do this:
    // var formElement = jqForm[0];
 
    alert(‘About to submit: \n\n‘ + queryString);
 
    // here we could return false to prevent the form from being submitted;
    // returning anything other than false will allow the form submit to continue
    return true;
}
 
// post-submit callback
function showResponse(responseText, statusText, xhr, $form)  {
    // for normal html responses, the first argument to the success callback
    // is the XMLHttpRequest object‘s responseText property
 
    // if the ajaxForm method was passed an Options Object with the dataType
    // property set to ‘xml‘ then the first argument to the success callback
    // is the XMLHttpRequest object‘s responseXML property
 
    // if the ajaxForm method was passed an Options Object with the dataType
    // property set to ‘json‘ then the first argument to the success callback
    // is the json data object returned by the server
 
    alert(‘status: ‘ + statusText + ‘\n\nresponseText: \n‘ + responseText +
        ‘\n\nThe output div should have already been updated with the responseText.‘);
}

来自为知笔记(Wiz)