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

时间:2022-11-22 14:33:04

提供一种方法就是利用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,表单都会提交,在这里可以对表单元素进行验证

 

 };