Ajax 使用和问题集锦
Ajax 使用和问题集锦
Ajax：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
introduce（简介）
-
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 -
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
-
jQuery不是生产者，而是大自然搬运工。 -
jQuery Ajax本质就是XMLHttpRequest，对他进行了封装，方便调用！
usage（用法）
前端
下载 jQuery：jquery-3.6.4.min.js.
$.get({
url: "请求资源路径",
data: {
"k1": "v1",
"k2": "v2"
},
success: function (result) {
// 成功的回调函数
}
})
$.post({
url: "请求资源路径",
data: {
"k1": "v1",
"k2": "v2"
},
success: function (result) {
// 成功的回调函数
}
})
后端
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.3</version>
</dependency>
@RestController
@RequestMapping(value = "/ajax")
public class AjaxController {
// 【错误示范❌】
// SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
@GetMapping("/hello")
public String hello() {
return "软柠柠吖";
}
// 【正确使用✔】
// 注意：需要导入 Jackson-databind 依赖，否则会报错
@GetMapping(value = "/hello2map")
public Map<String, String> hello2Map() {
Map<String, String> map = new HashMap<>();
map.put("result", "软柠柠吖");
return map;
}
}
问题集锦
ajax 从后端获取的中文数据显示为乱码或问号
essence（本质）
乱码的本质：服务端返回的字符集编码 与 客户端的编码方式 不一致。
实际场景：服务端返回 ISO-8859-1，而客户端的编码默认是 UTF-8。
问题图示：
.
common resolve（通用解决）
Controller 层使用 @ResponseBody 返回中文字符串的响应的情况下，即使 web.xml 中配置了编码过滤器，但是编码过滤器并不会起作用。原因：当我们使用了 @ResponseBody 注解的时候，SpringMVC 会自动使用 StringHttpMessageConverter 解析字符串，默认采用 IS0-8859-1 的编码方式解析，这个时候我们需要在 SpringMVC 的配置文件中重新对 StringHttpMessageConverter 进行配置。
<!-- 开启 mvc 的注解驱动 -->
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="defaultCharset" value="utf-8"/>
<property name="supportedMediaTypes">
<set>
<value>text/plain;charset=utf-8</value>
<value>text/html;charset=utf-8</value>
<value>application/json;charset=utf-8</value>
</set>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
specific resolve（特殊解决）
添加：produces = {"application/json;charset=utf-8"}
@RequestMapping(value = "/ajax", produces = {"application/json;charset=utf-8"})
或者导入 jackson-databind 依赖也可以解决乱码问题【推荐】
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.3</version>
</dependency>
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON
reappear（重现）
出现异常的条件：
@RestControllerproduces = {"application/json;charset=utf-8"}处理字符乱码问题，将原来后端返回的iso-8859-1编码的数据转为utf-8编码格式的数据，从而避免乱码。或者导入jackson-databind依赖return "软柠柠吖";返回一个中文字符串 "软柠柠吖"，非key: value格式。
@RestController
@RequestMapping(value = "/ajax")
public class AjaxController {
@GetMapping(value = "/hello", produces = {"application/json;charset=utf-8"})
public String hello() {
return "软柠柠吖";
}
}
.
.
essence（本质）
返回数据格式的问题，用 ajax 向后台查询的是一个字符串值，图方便只返回了一个 String，正确的 json 数据应该返回 key：value键值对，稍加修改后问题解决。
.
resolve（解决）
@GetMapping(value = "/hello2map")
public Map<String, String> hello2Map() {
Map<String, String> map = new HashMap<>();
map.put("result", "软柠柠吖");
return map;
}
.
No converter for [class java.util.HashMap] with preset Content-Type 'null'
org.springframework.http.converter.HttpMessageNotWritableException: No converter for [class java.util.HashMap] with preset Content-Type 'null'
Could not find acceptable representation
org.springframework.web.servlet.handler.AbstractHandlerExceptionResolver.logException Resolved [org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representation]
.
上面两个问题的解决方案为添加依赖：
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.3</version>
</dependency>
String Boot 异常 HttpMediaTypeNotAcceptableException 的原因和处理.
解决报错：No converter for [xxx] with preset Content-Type ‘null‘和Could not find acceptable representation.
参考博客
javascript中(function(){})($)与$(function)的区别.
还有一些参考博客穿插在软柠柠吖博客的内容中，感谢这些博主的贡献❗
