利用jquery.form.js实现将form提交转为ajax方式提交的方法（带上传的表单提交）

提供一种方法就是利用jquery.form.js。

（1）这个框架集合form提交、验证、上传的功能。

核心方法 -- ajaxForm() 和 ajaxSubmit()

 

$('#myForm').ajaxForm(function() {
　　alert("提交成功！欢迎下次再来！");
});

$('#myForm2').submit(function() {
　　$(this).ajaxSubmit(function() {
　　　　alert("提交成功！欢迎下次再来！"); 
　　});
　　return false; //阻止表单默认提交
});

ajaxForm() 和 ajaxSubmit() 都能接受0个或1个参数，当为单个参数时，该参数既可以是一个回调函数，也可以是一个options对象，上面的例子就是回调函数，

下面是options对象

 

 

代码如下：

第一步：引用js

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

<script type="text/javascript" src="js/jquery.form.js"></script>

第二步：页面写form 

<input type="text" id="text1">

<input type="text" id="text2">

<input type="text" id="text3">

<form method="post" enctype="multipart/form-data" id="formSubmit">

<div class="wrapBox">

<div class="fileBox clearfix">

<span class="pull-left">上传文件:</span>

<input type="file" class="pull-left" id="loadFile" name="uploadFile">

</div>

</div>

<div class="wrapSubmitBox clearfix">

<input type="button" id="submitBtn" value="提交">

<input type="hidden" id="ajaxParam" name="ajaxParam">

</div>

</form>

//上传文件的input  和提交按钮要写在form里面。<input type="hidden" id="ajaxParam" name="ajaxParam">是存储$(“#text1”),$(“#text2”),$(“#text3”)需要传给后台的数据。

//也可以写在form里面。不需要hidden.用最下面options里的data的方式传参。

第三步：写js调用jquery.form.js，对form表单进行ajax提交 :

$("#formSubmit").click(function(){

　　var valtext1=$("#text1").val();

　　var valtext2=$("#text2").val();

　　var valtext3=$("#text3").val();

　　uploadJsonData="{'text1':"+valtext1+",'text2':"+valtext2+",'valtext3':"+valtext3+"}";

　　$("#ajaxParam").val(uploadJsonData);

　　$("#formSubmit");

　　var options = {

　　　　url:'上传地址',

　　　　type:'post',

 　　　　beforeSubmit: showRequest,　　　　　　　　　

 

　　　　success:function(data){     

　　　　　　if(data.success==1){

　　　　　　　　alert('上传成功')

　　　　　　}

　　　　　},

　　　　error:function(){

　　　　}

　　　}; 

 

　　　$("#formSubmit");.ajaxSubmit(options);

　　});

 

（2）options对象内的值有哪些？
var options = {
target: '#output',　　　　　　　　 //把服务器返回的内容放入id为output的元素中
data:{param1:"自己的额外的参数"},  //这个参数是指通过ajax来提交给服务器，提交除了form内部input的参数，在后台中使用String param1=req.getParameter("param1");获取。
beforeSubmit: showRequest,         //提交前的回调函数
success: showResponse,             //提交后的回调函数
url: url,                          //默认是form的action， 如果申明，则会覆盖action
type: type,                        //默认是默认是自己在form标签上指定的method（get or post），如果申明，则会覆盖,如果没有指定，则使用get。
dataType: null,                    //html(默认), xml, script, json...接受服务端返回的类型,这个参数值的是服务器返回的数据类型，默认的是null也就是服务器可以默认返回字符串，然后将这些字符串放在target内部，当然还有json、xml，其中最常用的便是null和json
clearForm: true, 　　　　　　　　 //成功提交后，清除所有表单元素的值
resetForm: true, 　　　　　　　　 //成功提交后，重置所有表单元素的值
timeout: 3000 　　　　　　　　　　 //限制请求的时间，当请求大于3秒后，跳出请求
}

showRequest有三个参数formData, jqForm, options

 

function showRequest(formData, jqForm, options){  

 

　　　　　　 //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]    

 

　　　　　　 //jqForm:   jQuery对象，封装了表单的元素      　　　　　

 

　　　　　　 //options:  options对象  　　　　　　 

 

　　　　　　 var queryString = $.param(formData);     //name=1&address=2

 

　　　　　　 var formElement = jqForm[0];              //将jqForm转换为DOM对象   

 

　　　　　　 var address = formElement.address.value;  //访问jqForm的DOM元素    

 

　　　　　　return true;  //只要不返回false，表单都会提交,在这里可以对表单元素进行验证

 

 }; 

 

转载于:https://www.cnblogs.com/kelly2017/p/7071807.html