利用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

第二步：页面写form

</div>

</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，表单都会提交,在这里可以对表单元素进行验证

};

秒客网

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

相关文章