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>

AJAX请求,返回json进行页面绑值

AJAX请求,返回json进行页面绑值

猜你喜欢