spring：十一、springMVC ajax请求与响应

一斑人

已于 2024-06-03 11:50:36 修改

阅读量110

点赞数 1

文章标签： spring ajax okhttp

于 2024-06-03 11:22:45 首次发布

本文链接：https://blog.csdn.net/weixin_64520804/article/details/139410065

版权

Maven依赖

<!--        springMVC解析json加入Jason解析包-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.4</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.12.4</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.12.4</version>
        </dependency>

ajax.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/6/1
  Time: 15:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
</head>
<body>
<a href="javascript:void(0);" id="testAjax1">访问后台controller</a><br>
<a href="javascript:void(0);" id="testAjax2">访问后台controller,传递pojo</a><br>
<a href="javascript:void(0);" id="testAjax3">访问后台controller，传递json格式list</a><br>
<a href="javascript:void(0);" id="testAjax4">访问后台controller，传递json格式map</a><br>
<a href="javascript:void(0);" id="testAjax5">访问后台controller，返回字符串数据</a><br>
<a href="javascript:void(0);" id="testAjax6">访问后台controller，返回json数据</a><br>
<a href="javascript:void(0);" id="testAjax7">访问后台controller，返回json数组数据</a><br>

<script type="text/javascript" src="js/1.jq.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#testAjax1").click(function () {
            $.ajax({
                type: "POST",
                url: "ajax1", // 注意：如果这是相对路径，确保它相对于正确的上下文根
                data: { // 发送一个对象作为参数
                    message: "someValue" // 键是'data'，值是'someValue'
                },
                dataType: "text", // 期望从服务器返回的数据类型
                success: function(response) {
                    // 处理响应
                    console.log(response);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // 处理错误
                    console.log('Error: ' + textStatus, errorThrown);
                }
            });
        });


        $("#testAjax2").click(function () {
            console.log(2);
            var jsonData = {
                name: "name1",
                age: 22,
            };
            $.ajax({
                type: "POST",
                url: "ajax2",
                data: JSON.stringify(jsonData),
                dataType: "json",
                contentType:"application/json",
            });
        });


        $("#testAjax3").click(function () {
            console.log(3);
            var lists=["aaa","bbb","ccc"];
            $.ajax({
                type: "POST",
                url: "ajax3",
                data: JSON.stringify(lists),
                dataType: "json",
                contentType:"application/json",
            });
        });

        $("#testAjax4").click(function () {
            console.log(4);
            var maps={"m1":"value1","m2":"value2","m3":"value3"}
            $.ajax({
                type: "POST",
                url: "ajax4",
                data: JSON.stringify(maps),
                dataType: "json",
                contentType:"application/json",
            });
        });


        $("#testAjax5").click(function () {
            console.log(5);
            $.ajax({
                type: "POST",
                url: "ajax5",
                dataType: "text",
                contentType:"application/json",
                success: function(response) {
                    //var parse = JSON.parse(response);
                    // 处理响应
                    console.log(response);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // 处理错误
                    console.log('Error: ' + textStatus, errorThrown);
                }
            });
        });


        $("#testAjax6").click(function () {
            console.log(6);
            $.ajax({
                type: "POST",
                url: "ajax6",
                dataType: "json",
                contentType:"application/json",
                success: function(response) {
                    // 处理响应
                    console.log(response);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // 处理错误
                    console.log('Error: ' + textStatus, errorThrown);
                }
            });
        });


        $("#testAjax7").click(function () {
            console.log(7);
            $.ajax({
                type: "POST",
                url: "ajax7",
                dataType: "json",
                contentType:"application/json",
                success: function(response) {
                    // 处理响应
                    console.log(response);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // 处理错误
                    console.log('Error: ' + textStatus, errorThrown);
                }
            });
        });



    });
</script>

</body>
</html>

controller

package com.ajax;

import com.demo.pojo.User;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Map;

@RestController
public class AjaxController {
    //访问后台controller
    @RequestMapping(value = "/ajax1", method = RequestMethod.POST)
    public String getAjax(@RequestParam("message") String message) {
        System.out.println(message);
        return "hello";
    }

    //访问后台controller,传递pojo
    @PostMapping("/ajax2")
    public String getAjax2(@RequestBody User user) {
        System.out.println(user);
        return null;
    }

    //    访问后台controller，传递json格式list
    @PostMapping("/ajax3")
    public String getAjax3(@RequestBody List<String> lists) {
        System.out.println(lists);
        return null;
    }


    //    访问后台controller，传递json格式map
    @PostMapping("/ajax4")
    public String getAjax4(@RequestBody Map<String, String> maps) {
        System.out.println(maps);
        return null;
    }


    //    访问后台controller，返回字符串数据
    @PostMapping("/ajax5")
    public String[] getAjax5() throws JsonProcessingException {
        String[] strings = {"qqq", "wwww", "eee"};
//        ObjectMapper objectMapper = new ObjectMapper();
        //转换成json字符串
//        String s = objectMapper.writeValueAsString(strings);
        return strings;
    }


    //    访问后台controller，返回json数据
    @PostMapping("/ajax6")
    public String getAjax6() throws JsonProcessingException {
        User user = new User();
        user.setName("wsy1");
        user.setAge(18);
        ObjectMapper objectMapper = new ObjectMapper();
        //转换成json字符串
        String s = objectMapper.writeValueAsString(user);
        return s;
    }

    //    访问后台controller，返回json数组数据
    @PostMapping("/ajax7")
    public String getAjax7() throws JsonProcessingException {
        String[] strings = {"qqq", "wwww", "eee"};
        ObjectMapper objectMapper = new ObjectMapper();
        //转换成json字符串
        String s = objectMapper.writeValueAsString(strings);
        return s;
    }
}