Ajax请求（$.ajax()）中data属性传参数的形式
Ajax请求（$.ajax()）中data属性传参数的形式
PM吃瓜
发布于 2019-08-12 17:27:42
发布于 2019-08-12 17:27:42
首先定义一个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" onclick="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){
}
});
}本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读