美文网首页Spring前端JavaScript
【Java和前端案例】使用Ajax发送一个异步请求,响应封装的J

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

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

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

    1. 这里使用的 fast-json进行转换,需要导入依赖:
            <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.75</version>
            </dependency>
    
    1. 编写工具类处理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

    1. 返回一个字符串需要使用 @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>
    
    1. 响应结果输出:
    响应结果输出

    相关文章

      网友评论

        本文标题:【Java和前端案例】使用Ajax发送一个异步请求,响应封装的J

        本文链接:https://www.haomeiwen.com/subject/ktxccltx.html