Ajax请求传递data数据三种格式

Ajax请求传递data数据三种格式

ajax有三种传递传递data的方式:

1、json格式

2、标准参数模式

3、json字符串格式

1.json对象格式:

{“username”:”chen”,”nickname”:”alien”}

$.ajax({

type:"post",

url:"/test/saveUser",

data:{"username":"chen","nickname":"alien"},

dataType:"json", //指定响应的data数据类型为JSON对象。

success: function(data){

console.log(data);

}

});

如:当前的Ajax请求是一个POST请求,对请求体中的数据 使用默认的数据编码,格式如:key1 = value2&key2 = value2 a中的数据变成这样的格式:key1 = value2&key2 = value2 ,包装在Http请求体中传送给后台。

dataType:"json"

dataType:“json” :用来指定服务器返回的data数据类型必须是JSON类型。然后jQuery就会把后端返回的json字符串尝试通过JSON.parse()解析为js对象。

如果不指定dataType,jQuery 将自动根据 HTTP 包的 MIME 信息来智能判断,若MIME信息的值为JSON,则jQuery会自动的把data数据转换成JS对象的json,

接着Script把data传递给回调函数进行JS的脚本操作。

2、标准参数模式

形如:

“username=Liudehua & age=50”

$.ajax({

type:"post",

url:"/test/saveUser",

data:"username=chen&nickname=alien",

dataType:"json",

success: function(data){

console.log(data);

}

});

$(“#form1”).serialize() 就是把表单的数据拼成这个格式(key1 = value2&key2 = value2)的字符串,然后放在Http请求体中传给后台!

3.json字符串 ————>只用于post请求

形如:

“{“username”:”chen”,”nickname”:”alien”}”————>JSON对象格式的字符串

或者JSON.stringify({“username”:”chen”,”nickname”:”alien”})————>把JSON对象转成JSON格式的字符串。

$.ajax({

type:"post",

url:"/test/saveUser",

data:JSON.stringify({"username":"chen","nickname":"alien"}),

contentType:"json/application"

dataType:"json",

success: function(data){

console.log(data);

}

});

**这种方式不能用于 Get请求。

原因:

1、因为此种方式发送的请求,后端必须得用@RequestBody进行接收,且接收的是Http请求体中的数据,Get请求没有请求体。

2、而且此方式的Ajax 必须要添加 contentType:”json/application”这个字段信息。

注意:

1、

若为GET请求,则会把data的数据 附加在 URL 后,

格式如:localhost://findAll ? key1=value1&key2=value2

若为POST请求,则就会把data的数据 放在请求体中。

格式如:key1 = value2&key2 = value2

2、dataType:指定服务器端返回的数据类型。

若不指定,且后端返回的是Json,前端就会自动识别返回的数据是JSON。

相关博文html页面 ajax调用的数据显示异常或操作异常解决.解决ajax post提交 跨域 cors问题Axios 基于 Promise 的 HTTP 客户端ajax技术介绍Beacon API的应用-在浏览器被关闭之前要调用一个后端提供的请求Javascript Fetch API 教程how to send Synchronous and asynchronous ajax requests 如何发送同步和异步ajax请求【JS】fetch() 用法 取代ajax

Ajax请求传递data数据三种格式 赞 0 赏 分享

相关推荐

Eps图标、徽标、符号
det365APP

Eps图标、徽标、符号

📅 08-12 👁️ 7517
ons游戏排行榜
365bet足球比

ons游戏排行榜

📅 08-08 👁️ 9535
NBA2K18怎么扫脸 安卓苹果扫脸流程介绍
det365APP

NBA2K18怎么扫脸 安卓苹果扫脸流程介绍

📅 08-05 👁️ 1091
近邻宝智能快递柜
365bet足球比

近邻宝智能快递柜

📅 07-28 👁️ 7222
非搜流量提升的四个核心点及方法
det365APP

非搜流量提升的四个核心点及方法

📅 08-25 👁️ 3021
诗经·氓
det365APP

诗经·氓

📅 07-26 👁️ 413