AJAX--基于json格式的数据交换-JZTXT

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取信息列表</title>
</head>
<body>
    
    <script>
        window.onload = function(){
            document.getElementById("btn").onclick = function(){
                var xhr = new XMLHttpRequest()
                xhr.onreadystatechange = function(){
                    if(this.readyState == 4){
                        if (this.status == 200) {
                            // document.getElementById("stutbody").innerHTML = this.responseText
                            // 将json格式的字符串转换成json对象
                            var stuList = JSON.parse(this.responseText)
                            var html = ""
                            for (let i = 0; i < stuList.length; i++) {
                                const stu = stuList[i];
                                html += "<tr>"
                                html += "    <td>"+stu.name+"</td>"
                                html += "    <td>"+stu.age+"</td>"
                                html += "    <td>"+stu.address+"</td>"
                                html += "</tr>"
                            }
                            document.getElementById("stutbody").innerHTML = html
                        }else{
                            alert(this.status)
                        }
                    }
                }
                xhr.open("GET","/URL?t="+Math.random(),true)
                xhr.send()
            }
        }
    </script>

    <input type="button" value="显示信息" id="btn">
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>住址</th>
        </tr>
        <tbody id="stutbody">
            <!-- <tr>
                <td>zhangsan</td>
                <td>20</td>
                <td>sh</td>
            </tr> -->
        </tbody>
    </table>

</body>
</html>

后端代码

// 后端代码
声明HttpServletResponse
// 连接数据库
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
// 循环数据
out.print();

// 把数据给前端，然后把页面展示让前端展示
// 可以采用json格式或者xml格式
<!-- String jsonstr = "[{
    \"name\":\"zhangsan\",
    \"age\":20,
    \"address\":\"shan\"
},{
    \"name\":\"zhangsan\",
    \"age\":20,
    \"address\":\"shan\"
}]"; -->
// 动态拼接json字符串
StringBuilder json = new StringBuilder();
json.append("[");
json.append("{\"name\":\"");
json.append(name);
json.append("\",\"age\":");
json.append(age);
json.append(",\"address\":\"");
json.append(address);
json.append("\"},");
json.substring(0,json.length()-1+"]");

out.print(jsonstr)