jQuery插件 -- Form表单插件jquery.form.js

　　jquery.form.js官网

　　jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit()， 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外，插件还包括其他的一些方法： formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、 clearFields() 和 resetForm()等。

　　通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。

<script type="text/javascript">
$(function(){
    var options = { 
       // target:        '#output',   //把服务器返回的内容放入id为output的元素中  
        beforeSubmit:  showRequest,  //提交前的回调函数  
        success:       showResponse, //提交后的回调函数  
        resetForm: true, 
        dataType:  'json' 
 
        // other available options: 
        //url:       url          //默认是form的action， 如果申明，则会覆盖  
        //type:      type       //默认是form的method（get or post），如果申明，则会覆盖  
        //dataType:  null         //html(默认), xml, script, json...接受服务端返回的类型  
        //clearForm: true        //成功提交后，清除所有表单元素的值   
        //resetForm: true         //成功提交后，重置所有表单元素的值  
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 ////限制请求的时间，当请求大于3秒后，跳出请求  
    }; 
 
    // bind to the form's submit event 
    $('#my_form').submit(function() { 
        $(this).ajaxSubmit(options); 
        return false;  //阻止表单默认提交  
    }); 
});
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
   //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd
　　//jqForm:   jQuery对象，封装了表单的元素    
　　//options:  options对象 
    /*
    var uname = $("#uname").val();
    if(uname==""){
        $("#msg").html("姓名不能为空！");
        return false;
    }
    
    var age = $("#age").val();
    if(age==""){
        $("#msg").html("年龄不能为空！");
        return false;
    }*/
    $("#msg").html("正在提交...");
    
    return true; 
} 
 
// post-submit callback 
function showResponse(responseText, statusText)  { 
    $("#msg").html('提交成功');
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 
 
    // if the ajaxSubmit 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 ajaxSubmit 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.msg + 
        '\n\nThe output div should have already been updated with the responseText.'); 
}
</script>