Ajax之Jquery封装使用举例2（Json和JsonArray处理）

最新推荐文章于 2021-09-23 22:44:50 发布

叛逆的鲁鲁修love CC

最新推荐文章于 2021-09-23 22:44:50 发布

阅读量148

点赞数

文章标签： json 后端前端 ViewUI

原文链接：http://www.cnblogs.com/gongxr/p/10375879.html

版权

　　本例主要使用ajax进行异步数据请求，并针对返回数据为json和jsonarray类型的数据处理。

　　本例中只有前端的代码，后端代码不是本文重点，故省略。

　　后端接口返回数据为：

　　Json:

{"age":25,"gender":"女","id":"1","name":"Lily","telephone":"13788888"}

　　JsonArray：

[{"age":25,"gender":"女","id":"1","name":"Lily","telephone":"13788888"},{"age":22,"gender":"男","id":"3","name":"小明","telephone":"13798989898"},{"age":25,"gender":"女","id":"5","name":"Kite","telephone":"13788888"},{"age":22,"gender":"女","id":"6","name":"小红","telephone":"137111"}]

ajaxDemo.html

  1 <html>
  2 <head>
  3     <meta charset="UTF-8">
  4     <title>Ajax Demo</title>
  5     <link rel='stylesheet prefetch' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>
  6     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  7     <!-- 异步获取数据，并实时展示在页面上 -->
  8     <script type="text/javascript">
  9         <!--处理JsonArray数据-->
 10         function getAll() {
 11             $.ajax({
 12                 url: "/getAllStudentData",//请求地址
 13                 // data: {name: name, password: password},//提交的数据
 14                 type: "POST",//提交的方式
 15                 dataType: "TEXT", //返回类型 TEXT：字符串 JSON XML
 16                 success: function (data) { // 校验返回内容，进行跳转
 17                     //将获取到的数据输出到元素上
 18                     // $("#showAll").text(data);
 19                     $("#showAll").hide();
 20                     console.log(data);
 21                     //将JsonArray字符串组装成为Json对象数组
 22                     var jsons = eval("(" + data + ")");
 23                     // 删除子元素
 24                     $("#showAll_Two").empty();
 25                     for (var i in jsons) {
 26                         //jsons[i]表示获得第i个json对象即JSONObject
 27                         //jsons[i]通过.字段名称即可获得指定字段的值
 28                         console.log(jsons[i]);
 29                         var json = JSON.stringify(jsons[i])
 30                         // 动态添加子元素
 31                         $("#showAll_Two").append("<li>" + json + "</li>");
 32                     }
 33                     $("#showAll_One").text("第一个对象的name为：" + jsons[0].name);
 34                 },
 35                 error: function (xhr) {
 36                     // 失败输出HTTP状态码
 37                     alert("调用失败！HTTP状态码：" + xhr.status);
 38                 }
 39             })
 40         }
 41 
 42         //处理json数据
 43         function getOne() {
 44             var id = $("#studentId").val();
 45             $.ajax({
 46                 url: "/getStudentById",//请求地址
 47                 data: {id: id},//提交的数据
 48                 type: "POST",//提交的方式
 49                 dataType: "TEXT", //返回类型 TEXT：字符串 JSON XML
 50                 success: function (data) { // 校验返回内容，进行跳转
 51                     //将获取到的数据输出到元素上
 52                     $("#showOne").text(data);
 53                     console.log(data);
 54 
 55                     //将json转换为对象，方便取值
 56                     var obj = JSON.parse(data);
 57                     $("li#id").text("ID：" + obj.id);
 58                     $("li#name").text("姓名：" + obj.name);
 59                     $("li#age").text("年龄：" + obj.age);
 60                     $("li#gender").text("性别：" + obj.gender);
 61                     $("li#telephone").text("手机：" + obj.telephone);
 62                 },
 63                 error: function (xhr) {
 64                     // 失败输出HTTP状态码
 65                     alert("调用失败！HTTP状态码：" + xhr.status);
 66                 }
 67             })
 68         }
 69     </script>
 70     <link rel="stylesheet" href="css/ajaxStyle.css">
 71 </head>
 72 
 73 <body>
 74 <div class="container">
 75 
 76     <nav class="navbar navbar-inverse">
 77         <div class="container-fluid">
 78             <div class="navbar-header">
 79                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
 80                         aria-expanded="false" aria-controls="navbar">
 81                     <span class="sr-only">Toggle navigation</span>
 82                     <span class="icon-bar"></span>
 83                 </button>
 84                 <a class="navbar-brand" href="#"><strong>demo</strong>.com</a>
 85             </div>
 86             <div id="navbar" class="navbar-collapse collapse">
 87                 <ul class="nav navbar-nav">
 88                     <li><a href="/">首页</a></li>
 89                     <li class="active"><a href="#">Ajax范例</a></li>
 90                 </ul>
 91             </div><!--/.nav-collapse -->
 92         </div><!--/.container-fluid -->
 93     </nav>
 94 
 95     <div>
 96         <h3 class="page-header">1、查询所有信息</h3>
 97         <div class="row">
 98             <div class="col-md-12">
 99                 <button type="submit" class="btn btn-primary" id="subBtnAll" onclick="getAll()">查询全部</button>
100                 <br>
101                 <label id="showAll" style="width: 800px;">
102                     未查询到任何信息！
103                 </label>
104                 <br>
105                 <ul id="showAll_Two">
106                 </ul>
107                 <p id="showAll_One"></p>
108             </div>
109         </div>
110     </div>
111 
112     <div>
113         <h3 class="page-header">2、查询单个信息</h3>
114         <div class="row">
115             <div>
116                 <div class="col-md-12 col-sm-12">
117                     <div class="col-md-2 col-sm-2">
118                         <input type="text" class="form-control" id="studentId" value="1">
119                     </div>
120                     <button type="submit" class="btn btn-primary" onclick="getOne()">查询单个</button>
121                 </div>
122             </div>
123             <div class="col-md-12 col-sm-12">
124                 <label id="showOne">
125                     未查询到任何信息！
126                 </label>
127             </div>
128             <div class="col-md-12 col-sm-12">
129                 <ul>
130                     <li id="id">ID：</li>
131                     <li id="name">姓名：</li>
132                     <li id="age">年龄：</li>
133                     <li id="gender">性别：</li>
134                     <li id="telephone">手机：</li>
135                 </ul>
136             </div>
137 
138         </div>
139     </div>
140 </div>
141 </body>
142 
143 </html>

ajaxStyle.css

 1 /*
 2     ajax demo的样式
 3 */
 4 button#subBtnAll {
 5     margin-left: 20px;
 6 }
 7 
 8 label {
 9     margin: 20px;
10     /*margin-top: 20px;*/
11     /*margin-bottom: 20px;*/
12 }
13 
14 p {
15     margin-left: 20px;
16 }
17 
18 ul#showAll_Two {
19     margin-left: -20px;
20     margin-bottom: 20px;
21 }
22 
23 ul#showAll_Two li {
24     font-weight: bolder;
25     list-style-type: none;
26 }