Jquery取form表單中的所有參數

轉載自：https://blog.csdn.net/qq_15204179/article/details/82144522

表單： 

1.  
   <form class="" id="handle-form">
2.  
   <input type="text" name="id" id="id" value="">
3.  
   <input type="text" id="operator" name="operator" >
4.  
   </form>

第一種獲取form中數據的方法：

new FormData（$('#uploadForm')[0]）用法與$("#handle-form").serialize()差不多，就是 可以上傳文件但是對於jquery的要求是， 版本1.8及其以上方可支持；

注意：按鈕type非submit，而是buttern,Action 為空或無；

 

var handle-form = $("#handle-form").serialize();

1.  
   $.ajax({
2.  
   url: "",
3.  
   type: "post",
4.  
   contentType: "application/json; charset=utf-8",
5.  
   data: $("#handle-form").serialize();,
6.  
   dataType: "json",
7.  
   success: function (data) {
8.  
    
9.  
   }

 

第二種獲取form中數據的方法：

注意：按鈕type非submit，而是buttern,Action 為空或無；

1.  
   var formSerial = {};
2.  
   $($( "#handle-form").serializeArray()).each(function(){
3.  
   formSerial[ this.name] = this.value;
4.  
   });
5.  
    
6.  
   var fromValue = JSON.stringify(formSerial)

1.  
   $.ajax({
2.  
   url: "",
3.  
   type: "post",
4.  
   contentType: "application/json; charset=utf-8",
5.  
   data: JSON.stringify(formSerial),
6.  
   dataType: "json",
7.  
   success: function ( data) {
8.  
    
9.  
   }

form表單提交的幾種方法：

 一.表單提交

1.  
   <form action=’/login’ method=’post’ id = "loginForm">
2.  
    
3.  
   <input type=’text’ name=’username’ />
4.  
    
5.  
   <input type=’password’ name=’password’/>
6.  
    
7.  
   <input type=’submit’ value=’登陸'/>
8.  
    
9.  
   </form>

 二.Ajax提交form表單

1.  
   $( '#loginForm').submitForm({
2.  
   url: "/login",
3.  
   dataType: "text",
4.  
   callback: function (data) {
5.  
    
6.  
   }
7.  
   },
8.  
   before: function () {
9.  
    
10.  
    }
11.  
    }).submit();

三.form表單提交附件

需要設定form的enctype="multipart/form-data"並且添加<input type=’file’>

1.  
   //jQuery提交
2.  
   $( "#jqueryBtn").click(function(){
3.  
   $( "#loginForm").submit();
4.  
   })

 

1.  
   //js提交
2.  
   $( "#jsBtn").click(function(){
3.  
   document.loginForm.action="RegisterAction.action";
4.  
   document.loginForm.submit();
5.  
    
6.  
   })
7.  
    
8.  
   //js提交
9.  
   $( "#jsBtn").click(function(){
10.  
    document.getElementById('').submit();
11.  
    })
12.  
     

1.  
   //ajax提交
2.  
   $( "#ajaxBtn").click(function() {
3.  
   var params = $("#loginForm").serialize();
4.  
   $.ajax( {
5.  
   type : "POST",
6.  
   url : "RegisterAction.action",
7.  
   data : params,
8.  
   success : function(msg) {
9.  
   alert( "success: " + msg);
10.  
    }
11.  
    });
12.  
    })