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

谁借莪１个温暖的怀抱￠ 2021-07-04 11:15 339阅读 0赞

首先定义一个`form`表单：

<form id="login" >
            <input name="user" type="text"/>
            <input name="sex" type="radio" value="man"/>
            <input name="sex" type="radio" value="woman"/>
            interest:
            <input type="checkbox" name="interest" value="piu">PIU
            <input type="checkbox" name="interest" value="dss">DSS
            <input type="checkbox" name="interest" value="ddr">DDR<br>  
            <input type="button" name="submit" value="submit" οnclick="getFormInfo();"> 
        </form>
        <script type="text/javascript" src="./../js/jquery.min.js"></script>

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

//第一种写法（把参数拼接在URL中，data属性设为空{ }）
        function getFormInfo(){ 
            var name='wen';
            var user='chen';
            $.ajax({ 
             url: "/login/authenticate?name="+name+"&user="+user,
             type: "POST",
             data:{ },
             dataType: "json",
             success: function(data){ 
                 
              },
              error:function(err){ 
                console.log(err.statusText);
                console.log('异常');
              }
            });
        }

//第二种写法（参数写成json数据形式）
        function getFormInfo(){ 
            $.ajax({ 
             url: "http://192.168.10.32:6833/login/authenticate",
             type: "POST",
             data:{ 
                name:'chem',
                user:'wen'
             },
             cache:false,
             dataType: "json",
             success: function(data){ 
                 
              },
              error:function(err){ 
              }
            });
        }

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

//代码如下
        function getFormInfo(){ 
            var params=$('#login').serialize(); //把id为login的form表单里的参数自动封装为参数传递
            console.log(params);
            $.ajax({ 
             url: "http://192.168.10.32:6833/login/authenticate",
             type: "POST",
             data:params,
             cache:false,
             dataType: "json",
             success: function(data){ 
                 
              },
              error:function(err){ 
              }
            });
        }

//第四种写法（拼接data）
        function getFormInfo(){ 
            var name='chen';
            var user='wen';
            $.ajax({ 
             url: "http://192.168.10.32:6833/login/authenticate",
             type: "POST",
             data:'name='+name+'&user='+user,
             cache:false,
             dataType: "json",
             success: function(data){ 
                 
              },
              error:function(err){ 
              }
            });
        }

--------------------

还有几种形式：  
需要引入：`<script type="text/javascript" src="serializeJSON.js"></script>`

//第五种写法（表单序列化为json数据）
        function getFormInfo(){ 
            var params=$('#login').serializeJSON();
            console.log(params);
            $.ajax({ 
             url: "http://192.168.10.32:6833/login/authenticate",
             type: "POST",
             data:params,
             cache:false,
             dataType: "json",
             success: function(data){ 
                 
              },
              error:function(err){ 
              }
            });
        }

//第六种写法（既有全部直接获取表单中的数据又有单独出来的数据）
        function getFormInfo(){ 
            var params=$('#login').serializeJSON();
            console.log(params);
            params.height='20';
            $.ajax({ 
             url: "http://192.168.10.32:6833/login/authenticate",
             type: "POST",
             data:params,
             cache:false,
             dataType: "json",
             success: function(data){ 
                 
              },
              error:function(err){ 
              }
            });
        }