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>