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

Ajax请求($.ajax()为例)中data属性传参数的形式首先定义一个form表单:id=”login”interest:PIUDSSDDRtype=”button”name=”submit”value=”submit”onclick=”getFormInfo();”

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

首先定义一个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){
          }
        });
    }

今天的文章Ajax请求($.ajax()为例)中data属性传参数的形式分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/27874.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注