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

心已赠人 2021-06-22 15:36 391阅读 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){
              }
            });
        }

第三种写法：拼接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){
              }
            });
        }

第四种写法：根据表单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){
              }
            });
        }

还有一种类似的写法需要引入：`<``script` `type="text/javascript" src="serializeJSON.js"></``script``>`

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){
              }
            });
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，391人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery.Ajax()的data参数类型

假如现在有这样一个[表单][Link 1]，是添加元素用的。 <form id="addForm" action="UserAdd.action" type="post">

小灰灰/ 2024年03月30日 13:15/ 0 赞/ 64 阅读

相关 $.ajax() data{} 传参三种常见写法及ajax()方法参数详解

$.ajax() data\{\} 传参三种常见写法及ajax()方法参数详解作者:admin 时间:2019-8-30 9:16:12 浏览:6369 $.ajax

╰+哭是因爲堅強的太久メ/ 2023年10月10日 11:29/ 0 赞/ 44 阅读

相关 ajax 的data,ajax请求的data数据格式

ajax提交data类型一、问题来源今天使用ajax时，发现get传data时，传递json字符串时传不过去参数，所以做了一些实验测试ajax的get和post的传递d

妖狐艹你老母/ 2022年09月03日 06:25/ 0 赞/ 185 阅读

相关 Jquery中的ajax请求（$.ajax（））参数请求详解

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他h

女爷i/ 2022年07月15日 11:28/ 0 赞/ 280 阅读

相关 JQuery.Ajax()的data参数类型

[JQuery.Ajax()的data参数类型][JQuery.Ajax_data] 2017年9月14日：补充JQuery.Ajax()的数据类型本文以前提到

港控/mmm°/ 2022年05月30日 05:13/ 0 赞/ 167 阅读

相关 AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式

HTTP请求中，如果是get请求，那么表单参数以name=value&name1=value1的形式附到url的后面，如果是post请求，那么表单参数是在请求体中，也是以nam

妖狐艹你老母/ 2022年04月22日 01:52/ 0 赞/ 196 阅读

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

首先定义一个`form`表单： <form id="login" > <input name="user" type="text"/>

谁借莪１个温暖的怀抱￠/ 2021年07月04日 11:15/ 0 赞/ 365 阅读

相关 ajax请求的data数据格式

`ajax`提交`data`类型一、问题来源今天使用`ajax`时，发现`get`传`data`时，传递`json`字符串时传不过去参数，所以做了一些实验测试`

梦里梦外;/ 2021年06月26日 16:06/ 0 赞/ 430 阅读

相关 jquery ajax的data参数

data 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value

桃扇骨/ 2021年06月24日 13:59/ 0 赞/ 405 阅读

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

首先定义一个form表单： <form id="login" > <input name="user" type="text"/>

心已赠人/ 2021年06月22日 15:36/ 0 赞/ 392 阅读