Ajax请求（$.ajax()为例）中data属性传参数的形式

首先定义一个form表单：

1.  
   <form id="login" >
2.  
   <input name="user" type="text"/>
3.  
   <input name="sex" type="radio" value="man"/>
4.  
   <input name="sex" type="radio" value="woman"/>
5.  
   interest:
6.  
   <input type="checkbox" name="interest" value="piu">PIU
7.  
   <input type="checkbox" name="interest" value="dss">DSS
8.  
   <input type="checkbox" name="interest" value="ddr">DDR<br>
9.  
   <input type="button" name="submit" value="submit" οnclick="getFormInfo();">
10.  
    </form>
11.  
    <script type="text/javascript" src="./../js/jquery.min.js"></script>

实现Ajax提交数据进行请求，其中data属性设置传参的方法有好几种形式，如下：

1.  
   //第一种写法（把参数拼接在URL中，data属性设为空{ }）
2.  
   function getFormInfo(){
3.  
   var name='wen';
4.  
   var user='chen';
5.  
   $.ajax({
6.  
   url: "/login/authenticate?name="+name+"&user="+user,
7.  
   type: "POST",
8.  
   data:{},
9.  
   dataType: "json",
10.  
    success: function(data){
11.  
     
12.  
    },
13.  
    error:function(err){
14.  
    console.log(err.statusText);
15.  
    console.log('异常');
16.  
    }
17.  
    });
18.  
    }

1.  
   //第二种写法（参数写成json数据形式）
2.  
   function getFormInfo(){
3.  
   $.ajax({
4.  
   url: "http://192.168.10.32:6833/login/authenticate",
5.  
   type: "POST",
6.  
   data:{
7.  
   name:'chem',
8.  
   user:'wen'
9.  
   },
10.  
    cache:false,
11.  
    dataType: "json",
12.  
    success: function(data){
13.  
     
14.  
    },
15.  
    error:function(err){
16.  
    }
17.  
    });
18.  
    }

 第三种写法（根据表单id属性，把表单封装数据，调用JQuery的serialize()方法序列化为字符串）
 前提是：发送请求的必须是一个form表单，而且表单内要做参数的标签必须具有name属性，因为name属性会被认为请求参数名

1.  
   //代码如下
2.  
   function getFormInfo(){
3.  
   var params=$('#login').serialize(); //把id为login的form表单里的参数自动封装为参数传递
4.  
   console.log(params);
5.  
   $.ajax({
6.  
   url: "http://192.168.10.32:6833/login/authenticate",
7.  
   type: "POST",
8.  
   data:params,
9.  
   cache:false,
10.  
    dataType: "json",
11.  
    success: function(data){
12.  
     
13.  
    },
14.  
    error:function(err){
15.  
    }
16.  
    });
17.  
    }

1.  
   //第四种写法（拼接data）
2.  
   function getFormInfo(){
3.  
   var name='chen';
4.  
   var user='wen';
5.  
   $.ajax({
6.  
   url: "http://192.168.10.32:6833/login/authenticate",
7.  
   type: "POST",
8.  
   data:'name='+name+'&user='+user,
9.  
   cache:false,
10.  
    dataType: "json",
11.  
    success: function(data){
12.  
     
13.  
    },
14.  
    error:function(err){
15.  
    }
16.  
    });
17.  
    }

--------------------------------------------------分割线----------------------------------------------还有几种形式：

 需要引入：<script type="text/javascript" src="serializeJSON.js"></script>

 

1.  
   //第五种写法（表单序列化为json数据）
2.  
   function getFormInfo(){
3.  
   var params=$('#login').serializeJSON();
4.  
   console.log(params);
5.  
   $.ajax({
6.  
   url: "http://192.168.10.32:6833/login/authenticate",
7.  
   type: "POST",
8.  
   data:params,
9.  
   cache:false,
10.  
    dataType: "json",
11.  
    success: function(data){
12.  
     
13.  
    },
14.  
    error:function(err){
15.  
    }
16.  
    });
17.  
    }

1.  
   //第六种写法（既有全部直接获取表单中的数据又有单独出来的数据）
2.  
   function getFormInfo(){
3.  
   var params=$('#login').serializeJSON();
4.  
   console.log(params);
5.  
   params.height='20';
6.  
   $.ajax({
7.  
   url: "http://192.168.10.32:6833/login/authenticate",
8.  
   type: "POST",
9.  
   data:params,
10.  
    cache:false,
11.  
    dataType: "json",
12.  
    success: function(data){
13.  
     
14.  
    },
15.  
    error:function(err){
16.  
    }
17.  
    });
18.  
    }

     

    转自于：https://blog.csdn.net/qq_29569183/article/details/79194292