AJAX请求,返回json进行页面绑值
-
后台 controller
@RequestMapping(value = "backjson.do",method=RequestMethod.POST, produces = "application/json;charset=UTF-8") @ResponseBody public JSONObject logout(HttpServletRequest request, HttpServletResponse response) { String Name = request.getParameter("name"); String Phone = request.getParameter("phone"); System.out.println(Name); System.out.println(Phone); System.out.println("进行返回json"); String jsonStr = "{"meta":{"success":true,"message":"OK"},"data":"退出成功"}"; JSONObject jsonObj = JSONObject.fromObject(jsonStr); return jsonObj; } -
前台代码：
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>去往含有ajax的页面</title> </head> <body> <a href="queryList.html"><button type="button">点我!</button></a> </body> </html>queryList.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AJAX请求,返回json进行页面绑值</title> </head> <script src="js/jquery.js"></script> <script> var name = "测试"; //测试与后台的连通性 var phone = "1234"; /* ajax请求 */ $.ajax({ url : "http://localhost:8080/Ajax_demo/backjson.do", type : "post", data : { "name" : name, "phone" : phone, }, dataType : "json", success : function(data) { //alert(data); //console.log(data); //alert(data.meta.message); for ( var key in data) { var html = '<table border=1>'; if (key == "meta") { for ( var key1 in data[key]) { console.log(data[key][key1]); //alert(key1+":"+data[key][key1]); var obj = data[key][key1]; html += '<tr>' html += '<td>' + key1 + ":" + '</td>'; html += '<td>' + obj + '</td>'; html += '</tr>' } html += '</table>'; console.log(html); $('#div1').append(html); } //赋值到表格与div //$("#table tr").eq(1).find("td").html("111"); //添加到第一行 $("#td1").html(data[key].success); //绑定数据 $("#td2").html(data[key].message); $(".top").val("1234"); //给input表单绑定数据 $(".bottom").html("1234"); //给div绑定数据 $(".foot").html(key + ":" + data[key]); //给div绑定数据 //alert(key+":"+data[key]); } } }); </script> <body> 测试 <hr width="100%"> <br /> <div id="div1"></div> <hr width="100%"> <br /> <table border="1" id="table"> <tr> <td>success:</td> <td id="td1"></td> <td>message:</td> <td id="td2"></td> </tr> <!-- <tr> <td></td> <td></td> <td></td> <td></td> </tr> --> </table> <hr width="100%"> <br /> <input type="text" class="top" /> <hr width="100%"> <br /> <div class="bottom"></div> <hr width="100%"> <br /> <div class="foot"></div> </body> </html>