jQuery.form开发手记


一般情况下其实提交表单我们将数据$("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.');
}



posted @ 2016-02-24 03:42  leestar54  阅读(445)  评论(0编辑  收藏  举报