使用 AJAX 前后端传递数据

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

1、传递对象

1.1、jsp文件

javascript 复制代码

<%@ 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,password
    function 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、实现类

java 复制代码

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")
    @ResponseBody
    public String getUserinfoList(@RequestBody ArrayList<String> list) throws JsonProcessingException {
        System.out.println(list);
        ObjectMapper objectMapper = new ObjectMapper();
        return objectMapper.writeValueAsString("success");
    }

    @PostMapping(value="/userinfoListMap")
    @ResponseBody
    public 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 格式字符串作为响应数据返回给客户端。