第一步：引入jQuery

下载地址：https://www.jb51.net/zt/jquerydown.htm

 <script  src="${pageContext.request.contextpath}/static/js/jquery-3.5.1.js"></script>

第二步：编写js

<head>
    <title>Title</title>
    <script  src="${pageContext.request.contextpath}/static/js/jquery-3.5.1.js"></script>

</head>
<body>
启动1
<input type="button" id="btn" value="jsonAndAjax"><br>
<table align="center" width="800px">
    <td>
        <tr>id</tr>
        <tr>name</tr>
        <tr>password</tr>
    </td>
    <tbody id="content">
    </tbody>
</table>
<script>
    alert("2");
    $(function (){
        $("#btn").click(function (){
            $.post("${pageContext.request.contextpath}/ajax/a2",function (data){
                console.log(data);
                let html="";
                for (let i = 0; i <data.length ; i++) {
                    html+="<tr>"+
                        "<td>"+data[i].id+ "<td>"+
                        "<td>"+data[i].name+ "<td>"+
                        "<td>"+data[i].password+ "<td>"+
                        "<tr>";
                }
                $("#content").html(html);
            })
    })
    })
</script>
</body>

第三步：编写后端

   @RequestMapping(value = "a2",produces = "application/json;charset=utf-8")
    //使用json需要的注解
    @ResponseBody
    public String testAjax2() throws JsonProcessingException {
        System.out.println("a2");
        //创建一个jackson的对象映射器，用来解析数据
        ObjectMapper mapper = new ObjectMapper();
        List<User> list=new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            User user=new User(i,"x1"+i,"1"+i);
            list.add(user);
        }
        //将我们的对象解析成为json格式
        String string=mapper.writeValueAsstring(list);
            System.out.println(list);
        return string;
    }

请求方式

post

第一种写法

        $.post({
            //请求的url
            url:"${pageContext.request.contextpath}/ajax/a3",
            //'userName':$("#name").val() 获取id="name"节点的值，并且把值给username，附加到url后面，发送到后台
            data: {'userName':$("#name").val(),'password':$("#password").val(),},
            //接受后台的返回值
            /**
             * data：如果返回值只有一个，就是data
             *      如果返回值是map集合，那就data.key
             *      如果是list集合，data[i].key
             *
             *      关于data，我尝试过把它转化为对象，但是失败了。我觉的对象更好用
             *status:状态值，如404，200等
             *如果你想在标签内部添加文本或其他标签  $("#p1").html(data.string2); 可以很好的支持。功能和 innerHTML类似。
             *    $("#p1").css("color","red"); 前面一个参数表示属性，后面一个参数表示值
             * 
             */
            success:function (data,status){
                $("#p1").html(data.string2);
                $("#p1").css("color","red");
                
            }
        });

第二种写法

都写在一起，不写前面的名称

  $.post("${pageContext.request.contextpath}/ajax/a3",
            {'userName':$("#name").val(),'password':$("#password").val(),},
            function(data){
                    $("#p0").html(data.string1);
                    $("#p0").css("color","red");
                }
            );

Ajax的使用

第一步：引入jQuery

第二步：编写js

第三步：编写后端

请求方式

post

第一种写法

第二种写法

相关推荐