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>