使用 AJAX 前后端传递数据

使用异步操作(ajax)前后端传递数据

1、传递对象

1.1、jsp文件

<%@ page language="java"pageEncoding="UTF-8" isELIgnored="false"%><html>
<meta charset="UTF-8">
<%--${pageContext.request.contextPath}：
这是 JSP 表达式，它的作用是获取当前 Web 应用的上下文路径。
上下文路径是指 Web 应用在服务器上的根路径，
例如，若 Web 应用部署在 http://localhost:8080/myapp，那么上下文路径就是 /myapp。--%>
<script src="${pageContext.request.contextPath}/js/jquery-3.7.1.js"></script>
<%--<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>--%>
<script>// 创建userinfo对象，具备两个属性username,passwordfunction userinfo(username,password){this.username = username;this.password = password;}function sendAjax1() {//创建对象实例，初始化数据var userinfoRef = new userinfo('中国','中国人');// 使用JS中提供JSON转换工具将对象转换成JSON字符串 如{username:'中国',password:'中国人'}var jonsStringRef = JSON.stringify(userinfoRef);// 控制台输出测试转换是否成功console.log(jonsStringRef)// $调用JQuery工具库的ajax工具实现异步请求$.ajax({type:"POST",//请求方式url:"/Demo4_war_exploded/userinfo",//请求地址dataType:"json",//返回数据类型data:jonsStringRef, //携带数据contentType: "application/json; charset=utf-8",// 协议类型success:function(response){ // 响应成功,通过response获得响应数据console.log("请求成功:",response);},error:function(xhr,status,error){// 失败 触发error xhr请求响应全局对象，status 状态码，console.log("请求失败",status,error)}})}function sendAjax2() {// 对列表操作var myArray = new Array();myArray[0]="中国1";myArray[1]="中国2";myArray[2]="中国3";myArray[3]="中国4";// 转换成JSON格式var jsonString = JSON.stringify(myArray);console.log(jsonString)$.ajax({type:"POST",//请求方式url:"/Demo4_war_exploded/userinfoList",//请求地址dataType:"json",//返回数据类型data:jsonString,//携带数据contentType:"application/json;charset=utf-8",//协议类型success:function(response){//响应成功,通过response获得响应数据console.log("请求成功:",response);},error:function(xhr,status,error){//失败 触发error xhr请求响应全局对象，status 状态码，console.log("请求失败",status,error)}})}function sendAjax3() {var myArray = new Array();myArray[0]=new userinfo("中国1","中国1");myArray[1]=new userinfo("中国2","中国2");myArray[2]=new userinfo("中国3","中国3");myArray[3]=new userinfo("中国4","中国4");var jsonString = JSON.stringify(myArray);console.log(jsonString)$.ajax({type:"POST",//请求方式url:"/Demo4_war_exploded/userinfoListMap",//请求地址dataType:"json",//返回数据类型data:jsonString,//携带数据contentType:"application/json;charset=utf-8",//协议类型success:function(response){//响应成功,通过response获得响应数据console.log("请求成功:",response);},error:function(xhr,status,error){//失败 触发error xhr请求响应全局对象，status 状态码，console.log("请求失败",status,error)}})}function sendAjax4() {var jsonObject={"username":"accp","work":[{"address":"address1"},{"address":"address2"}],"school":{"name":"tc","address":"pjy"}}var jsonString = JSON.stringify(jsonObject);$.ajax({type:"POST",//请求方式url:"/Demo4_war_exploded/userinfoJSONString",//请求地址dataType:"json",//返回数据类型data:jsonString,//携带数据contentType:"application/json;charset=utf-8",//协议类型success:function(response){//响应成功,通过response获得响应数据console.log("请求成功:",response);},error:function(xhr,status,error){//失败 触发error xhr请求响应全局对象，status 状态码，console.log("请求失败",status,error)}})}</script>
<body>
<h2>Hello World!</h2>
<input type="button" onclick="sendAjax1()"  value="sendAjax1"/>
<br>
<input type="button" onclick="sendAjax2()"  value="sendAjax2"/>
<br>
<input type="button" onclick="sendAjax3()"  value="sendAjax3"/>
<br>
<input type="button" onclick="sendAjax4()"  value="sendAjax4"/>
<br>
</body>
</html>

1.2、实现类

package org.example;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;import javax.swing.*;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;@Controller
public class UserinfoController {// 只接收post的请求方式 value 该方法的访问地址@PostMapping(value="/userinfo")//响应JSON数据 @RequestBody 接收JSON格式的数据于jackson-databind配合使用@ResponseBody()
//，@ResponseBody 注解确保 getUserinfo 方法返回的 JSON 字符串能直接作为 HTTP 响应体返回给客户端。public String getUserinfo(@RequestBody Userinfo userinfo) throws JsonProcessingException {// 输出客户端传来的数据System.out.println(userinfo);// ObjectMapper是jackson中的工具用于封装解析JSON数据// 由于该方法使用@RequestBody要求响应数据必须为JSON格式，// 因此 将响应数据通过ObjectMapper转换成JSON，在向浏览器传递ObjectMapper objectMapper = new ObjectMapper();// 将字符串包装为JSON格式String jsonString = objectMapper.writeValueAsString("success");return jsonString;}@PostMapping(value="/userinfoList")@ResponseBodypublic String getUserinfoList(@RequestBody ArrayList<String> list) throws JsonProcessingException {System.out.println(list);ObjectMapper objectMapper = new ObjectMapper();return objectMapper.writeValueAsString("success");}@PostMapping(value="/userinfoListMap")@ResponseBodypublic String getUserinfoList(@RequestBody List<Map> list) throws JsonProcessingException {System.out.println(list);ObjectMapper objectMapper = new ObjectMapper();return objectMapper.writeValueAsString("success");}@PostMapping(value="/userinfoJSONString")public String getUserinfoJSONString(@RequestBody Map map) throws JsonProcessingException {System.out.println(map.get("username"));List<Map> worklist = (List)map.get("work");for(int i = 0;i<worklist.size();i++){Map address  = worklist.get(i);System.out.println("address:"+address.get("address"));}// 获得学校信息Map schoolmap = (Map)map.get("school");System.out.println("schoolMap:"+schoolmap.get("name"));System.out.println("schoolMap:"+schoolmap.get("address"));ObjectMapper objectMapper = new ObjectMapper();String jsonString = objectMapper.writeValueAsString("success");return jsonString;}}/*
请求处理：当客户端发送一个包含 JSON 数据的 POST 请求到服务器时，
Spring 框架会拦截这个请求。
数据解析：Spring 框架会根据请求头中的
Content-Type 来判断请求体的数据类型。
如果是 application/json，它会借助 Jackson
等 JSON 处理库（前提是项目中已经引入了这些库）将 JSON 数据解析成 Java 对象。
对象绑定：@RequestBody 注解会把解析后的 JSON 数据绑定到方法参数 Userinfo userinfo 上。
也就是说，JSON 数据中的属性会自动映射到 Userinfo 类的对应属性上。*///ObjectMapper 的主要作用就是将 Java 对象转换为 JSON 格式的字符串，
// 或者将 JSON 格式的字符串转换为 Java 对象。在你提供的代码中，
// ObjectMapper 被用来把字符串 "success" 包装成 JSON 格式的字符串，
// 然后将其作为响应数据返回给客户端。
//创建 ObjectMapper 实例：ObjectMapper objectMapper = new ObjectMapper();
// 创建了一个 ObjectMapper 对象，用于处理 JSON 数据的序列化和反序列化。
//将字符串转换为 JSON 格式：objectMapper.writeValueAsString("success");
// 调用 ObjectMapper 的 writeValueAsString 方法，将字符串 "success"
// 转换为 JSON 格式的字符串。在这个例子中，转换后的结果是 "\"success\""，
// 因为 JSON 字符串需要用双引号包裹。
//返回 JSON 格式的响应数据：return jsonString; 将转换后的
// JSON 格式字符串作为响应数据返回给客户端。