ajax请求接收返回json数据

最新推荐文章于 2022-05-20 20:53:07 发布

for_luo

最新推荐文章于 2022-05-20 20:53:07 发布

阅读量1.5k

点赞数

分类专栏： java笔记文章标签： ajax json

本文链接：https://blog.csdn.net/for_luo/article/details/78114332

版权

java笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

基础

$.ajax({
url : url, //要提交的URL路径
type : “get”, //发送请求的方式
data : data, //要发送到服务器的数据
dataType : “text”, //指定传输的数据格式
success : function(result) {//请求成功后要执行的代码
},
error : function() { //请求失败后要执行的代码
}
});

代码示例

<script type="text/javascript"> 
    function showStudent() {
        $.ajax({
            url : 'demoServer.jsp',
            data : {age:23},
            type : "post",
            dataType : "json",
            beforeSend : function() {
                //alert("发送前");
            },
            complete : function() {
                //alert("完成");
            },
            success : function(data) {
                var mystr = "";
                for (var i = 0; i < data.length; i++) {
                    mystr += "<tr>";
                    mystr += "<td>";
                    mystr += data[i].stuid;
                    mystr += "</td>";
                    mystr += "<td>";
                    mystr += data[i].stuname;
                    mystr += "</td>";
                    mystr += "<td>";
                    mystr += data[i].stuage;
                    mystr += "</td>";
                    mystr += "</tr>";
                }
                $("#mytable").append(mystr);
            },
            error : function() {
                alert("请求失败");
            }
        });
    }
</script>
</head>
<body>
    <input type="button" value="点击显示学生信息" onclick="showStudent()" />

    <table id="mytable" border="1">
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
    </table>

</body>
</html>

demoServer.jsp文件中的代码：

<%
System.out.println(request.getParameter("age"));
    out.print("[{\"stuid\":\"1\",\"stuname\":\"张三\",\"stuage\":\"23\"},{\"stuid\":\"2\",\"stuname\":\"李四\",\"stuage\":\"45\"}]");
%>