ajax-demo 示例学习

2023-11-12 20:26:40

异步请求AJAX(Asynchronous JavaScript and XML)

页面在没有刷新的情况下，请求服务器得到了数据或结果。
异步的JavaScript与XML，不是一门新技术，只是一个新的术语。
使用AJAX，网页能够将增量更新呈现在页面上，而不需要刷新整个页面。
虽然X代表XML，但目前JSON的使用比XML更加普遍。
https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX

示例

使用jQuery发送AJAX请求。

Controller层代码

/**
 * @author fang
 */
@Controller
@RequestMapping("/alpha")
public class AlphaController {
    @PostMapping("/ajax")
    @ResponseBody
    public String testAjax(String name,int age){
        System.out.println(name);
        System.out.println(age);
        return CommunityUtil.getJSONString(0,"操作成！");
    }
}

静态html-ajax示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<body>
    <p>
        <input type="button" value="发送" onclick = "send()">
    </p>

<!--引入jquery-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script>
    function send() {
        $.post(
            /*请求路径*/
            "/community/alpha/ajax",
            /*提交数据，json格式*/
            {"name":"zhangsan","age":23},
            /*data 是服务器传给浏览器的数据，数据类型：字符串
            * 回调函数*/
            function (data) {
                console.log(typeof(data));
                console.log(data);

                data = $.parseJSON(data);
                console.log(typeof(data));
                console.log(data.code);
                console.log(data.msg);
            }
        );
    }
</script>
</body>
</html>

工具类的代码

/**
     * 将数据转换为json字符串
     * @param code json编号
     * @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){
            for (String key:map.keySet()) {
                json.put(key,map.get(key));
            }
        }
        return json.toJSONString();
    }
    public static String getJSONString(int code){
        JSONObject json = new JSONObject();
        json.put("code",code);
        return json.toJSONString();
    }
    public static String getJSONString(int code, String msg){
        JSONObject json = new JSONObject();
        json.put("code",code);
        json.put("msg",msg);
        return json.toJSONString();
    }

效果（页面无刷新，请求服务器得到数据）

ajax-demo 示例学习
学习视频总结2021年12月07日

码农公寓

异步请求AJAX(Asynchronous JavaScript and XML)

示例

相关文章