【Java和前端案例】使用Ajax发送一个异步请求，响应封装的J

作者: itlu | 来源:发表于2021-03-14 17:41 被阅读0次

【Java和前端案例】使用Ajax发送一个异步请求，响应封装的J
node中的异步I/O
使用promise封装ajax请求
<Ajax>总结：知识点
ajax基本操作
HTTP请求中的Form Data与Request Payloa
20170814
jQuery+Ajax
ajax
JavaScript笔记(2):JavaScript的基本知识

1. 后端封装处理Java对象转JSON字符串的工具方法

这里使用的 fast-json进行转换，需要导入依赖:

        <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.75</version>
        </dependency>

编写工具类处理JSON

/**
     * 返回一个Json字符串
     *
     * @param code
     * @param msg
     * @param map
     * @return
     */
    public static String getJsonString(int code,
                                       String msg,
                                       Map<String, Object> map) {
        JSONObject json = new JSONObject();
        json.put("code", code);
        json.put("msg", msg);

        if (map != null) {
            // 遍历map拿出其中的 key 和 value 设置到json中
            for (String key : map.keySet()) {
                json.put(key, map.get(key));
            }
        }
        // 将json对象转换为 json 字符串
        return json.toJSONString();
    }

    /**
     * 方法重载设置 code 和 msg
     * @param code
     * @param msg
     * @return
     */
    public static String getJsonString(int code, String msg) {
        return getJsonString(code, msg, null);
    }

    /**
     * 方法重载设置 code
     * @param code
     * @return
     */
    public static String getJsonString(int code) {
        return getJsonString(code, null, null);
    }

2. 后端Java编写处理Ajax请求的Controller

返回一个字符串需要使用 @ResponseBody注解:

     /**
     * 发布异步请求
     *
     * @param name
     * @param age
     * @return
     */
    @PostMapping("/ajax")
    @ResponseBody
    public String sendAjax(String name, int age) {
        System.out.println(name);
        System.out.println(age);
        Map<String, Object> map = new HashMap<>();
        map.put("name", name);
        map.put("age", age);
        return NewsUtils.getJsonString(0, "成功!", map);
    }

3. 前端发送一个ajax请求

<body>

<p>
  <input type="submit" value="发送" onclick="send()">
</p>

<!-- 引入Jquery资源 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script>

    function send() {
        $.post(
            // 请求路径
            "/circle/alpha/ajax",
            {
                "name": "张三",
                "age": 23
            },
      function (data) {
                console.log(data);
                console.log(typeof data);
                // 将字符串转换为 JS 对象
                data = $.parseJSON(data);
                console.log(typeof data);
                console.log(data.msg);
                console.log(data.code);
                console.log(data.age);
                console.log(data.name);
            }
        )
    }

</script>