AJAX笔记

最新推荐文章于 2024-09-04 21:05:49 发布

?Lucky�???

最新推荐文章于 2024-09-04 21:05:49 发布

阅读量672

点赞数 19

文章标签： ajax 笔记前端

本文链接：https://blog.csdn.net/qq_45726643/article/details/140045618

版权

AJAX：Asynchronous JavaScript And Xml

AJAX传值规则：

前端传值后端

１.发送方式

通过data属性：将要传递的值放在data属性里。通常以键值对（key-value）的形式。如：param = {“parm1”:param1，“param2”:param2}
通过URL参数：将数据附加在URL路径的后面，通常以查询字符串（query string）的形式，如?key=value&anotherKey=anotherValue。不过这种方式可能存在安全性问题，因为它可能会将参数暴露在浏览器中

２.数据类型

发送的数据可以是字符串、数字、数组、对象等，但在发送前需要转换为字符串格式（例如，通过JSON.stringify()转换为JSON字符串）

３.同步和异步：

async属性默认为true，即异步发送请求。若设置为false，则为同步发送

４.HTTP方法

后端接收数据

１.路由和控制器

后端服务器通常根据请求的URL和HTTP方法来决定由哪个路由（route）和控制器（controller）来处理请求

２.解析请求数据

对于POST请求，后端需要解析请求体（body）中的数据。这通常涉及解析JSON、表单数据（form data）或查询字符串

３.处理数据

后端根据业务逻辑处理接收到的数据，如数据库操作、计算等

４.返回响应

处理完成后，后端会返回响应数据。响应可以是各种类型的数据，如JSON对象、XML文档、HTML页面等

前端接收数据

１.解析响应

在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】

?Lucky�???

关注

19
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
AJAX笔记

AJAX简单使用
复制链接

扫一扫