AJAX:Asynchronous JavaScript And Xml
AJAX传值规则:
前端传值后端
1.发送方式
- 通过data属性:将要传递的值放在data属性里。通常以键值对(key-value)的形式。如:param = {“parm1”:param1,“param2”:param2}
- 通过URL参数:将数据附加在URL路径的后面,通常以查询字符串(query string)的形式,如?key=value&anotherKey=anotherValue。不过这种方式可能存在安全性问题,因为它可能会将参数暴露在浏览器中
2.数据类型
- 发送的数据可以是字符串、数字、数组、对象等,但在发送前需要转换为字符串格式(例如,通过JSON.stringify()转换为JSON字符串)
3.同步和异步:
- async属性默认为true,即异步发送请求。若设置为false,则为同步发送
4.HTTP方法
后端接收数据
1.路由和控制器
- 后端服务器通常根据请求的URL和HTTP方法来决定由哪个路由(route)和控制器(controller)来处理请求
2.解析请求数据
- 对于POST请求,后端需要解析请求体(body)中的数据。这通常涉及解析JSON、表单数据(form data)或查询字符串
3.处理数据
- 后端根据业务逻辑处理接收到的数据,如数据库操作、计算等
4.返回响应
- 处理完成后,后端会返回响应数据。响应可以是各种类型的数据,如JSON对象、XML文档、HTML页面等
前端接收数据
1.解析响应
- 在ajax的success回调中,前端代码通常会解析后端返回的数据
2.更新UI
根据解析后的数据,前端可能会更新页面上的某些元素,而不需要重新加载整个页面
后端参数对应
1.@RequestParam注解
-
当使用GET请求或者表单提价时,可以通过@RequestParam注解直接获取请求参数
// 对应前端传输的 key1=value1&key2=value2 @RequestMapping(value = "/your-endpoint", method = RequestMethod.GET) public ResponseEntity<?> yourMethod(@RequestParam("key1") String value1, @RequestParam("key2") String value2) { // 处理业务逻辑 return ResponseEntity.ok().body("Success"); }
-
如果前端传输的是数组,可以使用以下方式:
// 对应前端传输的 key1=value1,key2&key2=value2,value3 @RequestMapping(value = "/your-endpoint", method = RequestMethod.GET) public ResponseEntity<?> yourMethod(@RequestParam("key1") List<String> values) { // 处理业务逻辑 return ResponseEntity.ok().body("Success"); }
2.@RequestBody注解
-
当使用POST请求,并且请求体是JSON格式时,可以使用@RequestBody注解
// 对应前端传输的 JSON 格式数据 { "key1": "value1", "key2": "value2" } @RequestMapping(value = "/your-endpoint", method = RequestMethod.POST) public ResponseEntity<?> yourMethod(@RequestBody YourDTO yourDTO) { // YourDTO 是一个包含 key1 和 key2 字段的类 // 处理业务逻辑 return ResponseEntity.ok().body("Success"); }
3.@PathVariable注解
-
如果参数是通过URL路径传递的,可以使用@PathVariable
// 对应前端传输的 URL 如 /your-endpoint/value1/value2 @RequestMapping(value = "/your-endpoint/{key1}/{key2}", method = RequestMethod.GET) public ResponseEntity<?> yourMethod(@PathVariable("key1") String value1, @PathVariable("key2") String value2) { // 处理业务逻辑 return ResponseEntity.ok().body("Success"); }
4.@ModelAttribute注解
-
如果前端发送的是一个数组或列表,可以在后端使用List来接收
// 对应前端传输的 JSON 格式数组 [ "value1", "value2" ] @RequestMapping(value = "/your-endpoint", method = RequestMethod.POST) public ResponseEntity<?> yourMethod(@RequestBody List<String> values) { // 处理业务逻辑 return ResponseEntity.ok().body("Success"); }
5.DTO封装
-
在实际开发中,通常使用DTO(Data Transfer Object)来封装请求数据,这样有助于代码的整洁和可维护性
例如:如果前端传输的参数中既有对象列表(List),又有单独的字符串,可以在后端使用一个DTO来封装这些参数。创建一个DTO类来同时接收对象列表和字符串参数
// DTO类 public class YourDTO { private List<YourObject> objects; // 对象列表 private String otherParam; // 单独的字符串 // Getters and setters } // 对象类 public class YourObject { // 对象属性 // Getters and setters } // Controller方法 @PostMapping("/your-endpoint") public ResponseEntity<?> yourMethod(@RequestBody YourDTO yourDTO) { // 使用yourDTO.getObjects()获取对象列表 // 使用yourDTO.getOtherParam()获取字符串参数 // 处理业务逻辑 return ResponseEntity.ok().body("Success"); }
前端发送的JSON格式可能如下:
{ "objects": [ {"objectId": "value1", "objectName": "name1"}, {"objectId": "value2", "objectName": "name2"} ], "otherParam": "stringValue" }
上述如果前端是通过表单或者特定的编码方式发送数据,也可以同时使用@RequestParam和@RequestBody注解
@PostMapping("/your-endpoint") public ResponseEntity<?> yourMethod(@RequestParam("otherParam") String otherParam, @RequestBody List<YourObject> objects) { // 使用objects获取对象列表 // 使用otherParam获取字符串参数 // 处理业务逻辑 return ResponseEntity.ok().body("Success"); }
前端发送的数据可能类似于以下结构:
POST /your-endpoint?otherParam=stringValue Content-Type: application/json [ {"objectId": "value1", "objectName": "name1"}, {"objectId": "value2", "objectName": "name2"} ]
注意:确保前端发送的数据与后端Controller的期望相匹配。如果使用@RequestBody。则前端发送的数据应该是一个JSON对象,而如果使用@RequestParam,则应该遵循URL编码的格式
在使用Ajax进行前端与后端数据交互时,后端接收参数的默认注解并不是@RequestParam
。实际上,Spring框架中,对于HTTP请求中的参数处理,注解的使用取决于几个因素,包括请求的类型(GET、POST等)、发送的数据格式(如application/json、application/x-www-form-urlencoded等)以及后端期望如何接收这些数据。
以下是一些常见的后端接收参数的情况:
1.表单提交(Content-Type: application/x-www-form-urlencoded):
-
如果使用Ajax发送的是编码为
application/x-www-form-urlencoded
的数据(通常是表单数据),并且使用GET或POST请求,后端可以通过@RequestParam
注解直接从请求的URL中接收集合的参数。 -
示例:
@RequestMapping(value = "/login", method = RequestMethod.POST) public String login(@RequestParam("username") String username, @RequestParam("password") String password) { // ... }
2.JSON提交(Content-Type: application/json):
-
如果Ajax请求的
Content-Type
设置为application/json
,并传递一个JSON字符串,那么后端通常使用@RequestBody
注解来接收整个请求体中的JSON数据,并将其映射到Java对象。 -
示例:
@RequestMapping(value = "/login", method = RequestMethod.POST, consumes = "application/json") public String login(@RequestBody User user) { // ... }
-
在这种情况下,默认情况下不会使用
@RequestParam
,因为参数不是作为URL的一部分传递的。
3.直接对象接收:
- 有时,如果发送的数据与对象属性完全匹配,即使没有使用
@RequestBody
,Spring也能自动将参数映射到Java对象上,这通常适用于application/x-www-form-urlencoded
编码的数据。
关于默认注解的问题,如果后端没有特别指定使用@RequestBody
或者@RequestParam
,并且前端发送的是表单数据,Spring MVC默认会尝试将请求参数绑定到控制器方法的参数上。如果方法参数是一个简单类型(如String、Integer等),它将默认使用@RequestParam
的方式处理。
然而,如果在处理JSON数据时没有指定@RequestBody
,后端通常不会正确解析参数,可能会得到null值或者抛出异常。
综上所述,后端接收Ajax传值的默认注解并不是@RequestParam
,而是取决于请求的Content-Type和后端如何配置。在处理JSON数据时,通常需要显式使用@RequestBody
注解。
$.ajax()参数
示例:
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
url
(默认为当前页地址)发送请求的地址
参数类型:【String】
type
请求方式(post/get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持
参数类型:【String】
timeout
设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置
参数类型:【Number】
async
默认设置为true,所有请求均为异步请求
- 如果需要发送同步请求,需设置为false
- 注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行
参数类型:【Boolean】
cache
默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息
- true(默认值)时:在第一次请求完成之后,如果地址和参数不变化,第二次去请求,会默认获取缓存中的数据,不去读取服务器端的最新数据
- false(默认值)时:每次读取的是最新的数据
- ajax缓存支队GET方式的请求有效,因为浏览器认为POSt请求提交的内容必定有变化,所以不走缓存。所以POST下都是false
参数类型:【Boolean】
data
发送到服务器的数据。
- 如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后
- 防止这种自动转换,可以查看processData选项
- 对象必须为key/value格式,例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2
- 如果是数组,JQuery将自动为不同值对应同一个名称,例如{foo:[“bar1”,"bar2]}转换为&foo=bar1&foo=bar2
参数类型:【Object/String】
dataType
预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递
参数类型:
- 【xml】:返回XML文档,可用JQuery处理
- 【html】:返回纯文本HTML信息;包含的script标签会插入DOM时执行
- 【script】:返回纯文本JavaScript代码。不会缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求
- 【json】:返回JSON数据
- 【jsonp】:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数
- 【text】:返回纯文本字符串
success
请求成功后调用的回调函数,有两个参数
-
由服务器返回,并根据dataType参数进行处理后的数据
-
描述状态的字符串
function(data.textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this;//调用本次ajax请求时传递的options参数 }
参数类型:【Function】
error
请求失败时被调用的函数。该函数有三个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:
function(XMLHttpRequest,textStatus,errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this;//调用本次ajax请求时传递的options参数
}
可用从4个属性中读取信息:
- readyState:当前的状态。0未初始化;1正在载入;3数据进行交互;4完成
- status:返回的HTTP状态码。常见的错误404(客户端出错)、500(服务端出错)
- statusText:对应状态码的错误信息。eg:404、not found:500、Internal Server Error
- responseText:服务器响应返回的文本信息
参数类型:【Function】
ContentType
当发送信息至服务器时,内容编码类型默认为“application/x-www-form-urlencoded”,该默认值适合大多数应用场合
参数类型:【String】
username
用于响应HTTP访问认证请求的用户名
参数类型:【String】
password
用于响应HTTP访问认证请求的密码
参数类型:【String】
processData
默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以匹配默认内容类型”applictaion/x-www-form-urlencoded“。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false
参数类型:【Boolean】