本例主要使用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

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Ajax Demo</title>

     <link rel='stylesheet prefetch' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>

     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

     <!-- 异步获取数据，并实时展示在页面上 -->

     <script type="text/javascript">

         <!--处理JsonArray数据-->

         function getAll() {

             $.ajax({

                 url: "/getAllStudentData",//请求地址

                 // data: {name: name, password: password},//提交的数据

                 type: "POST",//提交的方式

                 dataType: "TEXT", //返回类型 TEXT：字符串 JSON XML

                 success: function (data) { // 校验返回内容，进行跳转

                     //将获取到的数据输出到元素上

                     // $("#showAll").text(data);

                     $("#showAll").hide();

                     console.log(data);

                     //将JsonArray字符串组装成为Json对象数组

                     var jsons = eval("(" + data + ")");

                     // 删除子元素

                     $("#showAll_Two").empty();

                     for (var i in jsons) {

                         //jsons[i]表示获得第i个json对象即JSONObject

                         //jsons[i]通过.字段名称即可获得指定字段的值

                         console.log(jsons[i]);

                         var json = JSON.stringify(jsons[i])

                         // 动态添加子元素

                         $("#showAll_Two").append("<li>" + json + "</li>");

                     }

                     $("#showAll_One").text("第一个对象的name为：" + jsons[0].name);

                 },

                 error: function (xhr) {

                     // 失败输出HTTP状态码

                     alert("调用失败！HTTP状态码：" + xhr.status);

                 }

             })

         }

         //处理json数据

         function getOne() {

             var id = $("#studentId").val();

             $.ajax({

                 url: "/getStudentById",//请求地址

                 data: {id: id},//提交的数据

                 type: "POST",//提交的方式

                 dataType: "TEXT", //返回类型 TEXT：字符串 JSON XML

                 success: function (data) { // 校验返回内容，进行跳转

                     //将获取到的数据输出到元素上

                     $("#showOne").text(data);

                     console.log(data);

                     //将json转换为对象，方便取值

                     var obj = JSON.parse(data);

                     $("li#id").text("ID：" + obj.id);

                     $("li#name").text("姓名：" + obj.name);

                     $("li#age").text("年龄：" + obj.age);

                     $("li#gender").text("性别：" + obj.gender);

                     $("li#telephone").text("手机：" + obj.telephone);

                 },

                 error: function (xhr) {

                     // 失败输出HTTP状态码

                     alert("调用失败！HTTP状态码：" + xhr.status);

                 }

             })

         }

     </script>

     <link rel="stylesheet" href="css/ajaxStyle.css">

 </head>

 <body>

 <div class="container">

     <nav class="navbar navbar-inverse">

         <div class="container-fluid">

             <div class="navbar-header">

                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"

                         aria-expanded="false" aria-controls="navbar">

                     <span class="sr-only">Toggle navigation</span>

                     <span class="icon-bar"></span>

                 </button>

                 <a class="navbar-brand" href="#"><strong>demo</strong>.com</a>

             </div>

             <div id="navbar" class="navbar-collapse collapse">

                 <ul class="nav navbar-nav">

                     <li><a href="/">首页</a></li>

                     <li class="active"><a href="#">Ajax范例</a></li>

                 </ul>

             </div><!--/.nav-collapse -->

         </div><!--/.container-fluid -->

     </nav>

     <div>

         <h3 class="page-header">1、查询所有信息</h3>

         <div class="row">

             <div class="col-md-12">

                 <button type="submit" class="btn btn-primary" id="subBtnAll" onclick="getAll()">查询全部</button>

                 <br>

                 <label id="showAll" style="width: 800px;">

                     未查询到任何信息！

                 </label>

                 <br>

                 <ul id="showAll_Two">

                 </ul>

                 <p id="showAll_One"></p>

             </div>

         </div>

     </div>

     <div>

         <h3 class="page-header">2、查询单个信息</h3>

         <div class="row">

             <div>

                 <div class="col-md-12 col-sm-12">

                     <div class="col-md-2 col-sm-2">

                         <input type="text" class="form-control" id="studentId" value="1">

                     </div>

                     <button type="submit" class="btn btn-primary" onclick="getOne()">查询单个</button>

                 </div>

             </div>

             <div class="col-md-12 col-sm-12">

                 <label id="showOne">

                     未查询到任何信息！

                 </label>

             </div>

             <div class="col-md-12 col-sm-12">

                 <ul>

                     <li id="id">ID：</li>

                     <li id="name">姓名：</li>

                     <li id="age">年龄：</li>

                     <li id="gender">性别：</li>

                     <li id="telephone">手机：</li>

                 </ul>

             </div>

         </div>

     </div>

 </div>

 </body>

 </html>

ajaxStyle.css

 /*

     ajax demo的样式

 */

 button#subBtnAll {

     margin-left: 20px;

 }

 label {

     margin: 20px;

     /*margin-top: 20px;*/

     /*margin-bottom: 20px;*/

 }

 p {

     margin-left: 20px;

 }

 ul#showAll_Two {

     margin-left: -20px;

     margin-bottom: 20px;

 }

 ul#showAll_Two li {

     font-weight: bolder;

     list-style-type: none;

 }

运行截图：

Ajax之Jquery封装使用举例2（Json和JsonArray处理）的更多相关文章

  1. Ajax之Jquery封装使用举例

    <html> <head> <meta charset="UTF-8"> <title>登陆页面</title> < ...

  2. jQuery Ajax 二次封装

    jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%> ...

  3. Jquery封装ajax

    Jquery封装ajax   Load方法     <!-- 将jquery.js导入进来 -->     <script type="text/javascript&qu ...

  4. 模仿JQuery封装ajax功能

    需求分析 因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...

  5. jQuery 封装的ajax

    jquery封装的ajax 具体操作: $.get(url  [,data]  [,fn回调函数]   [, dataType]); data:给服务器传递的数据,请求字符串 .json对象 都可以设 ...

  6. 不借助jquery封装好的ajax，你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  7. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

  8. Jquery封装的ajax的使用过程发生的问题

    Jquery封装的ajax的使用过程发生的问题 今天在做项目的时候使用到了ajax来完成项目前后端数据交互,在之后发现在前端没有数据显示,而后端数据确实存在,在多次检查代码之后,发现代码并不存在问题, ...

  9. ajax的再次封装！(改进版) —— new与不 new 有啥区别？

    生命不息重构不止! 上一篇写了一下我对ajax的再次封装的方法,收到了很多有价值的回复,比如有童鞋建议用$.extend,一开始还以为要做成插件呢,后来才知道,原来这个东东还可以实现合并.省着自己再去 ...

随机推荐

  1. 20175330 实验一 《Java开发环境的熟悉》实验报告

    一.实验内容及步骤 (一)使用JDk编译.运行简单的Java程序 (一)使用JDk编译.运行简单的Java程序 输入cd Code命令进入Code目录 输入mkdir 20175308建立实验目录 l ...

  2. mac sourcetree push分支选中所有tag的时候报错

    错误信息: ....... ! [rejected] 573_0811_stable -> 573_0811_stable (already exists)updating local trac ...

  3. 2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(数据库简单说明)

    1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(视频总揽) 这里有个教程   http://www.cnblogs.com/best/p/6517755.h ...

  4. eclipse svn合并小结

    合并时候,当前在哪个分支上,哪个分支即为“主干” 弱化主干 分支的概念.svn原则上并没有主干 分子 主 从的概念.从一个项目衍生(分支)出来的版本,都可以是主,也可以是从. 版本之间互相合并原理 文 ...

  5. Python 学习 第十三篇：数据的读写-文件、DataFrame、json

    Python的文件是一个重要的对象,使用open()函数来打开文件,创建文件对象,进行文件的读写操作.当数据用于交换信息时,通常需要把数据保存为有格式的文本数据,可以保存为有特定的行分隔符和列分隔符的 ...

  6. scrapy之管道

    scrapy之管道 通过管道将数据持久化到数据库中,企业中常见的数据库是MySQL,分布式爬取数据时只能讲数据存储到Redis装,还可以将数据存储到本地磁盘(即写入到本地文件中). 未完待续... 0

  7. 03-Linux的shell命令 .doc

    快捷键 基本操作和命令 Cd转换文件夹 以/开头的是绝对路径 没有/相对路径 ../代表上一级目录 Tab补充 Ctrl+R 查找历史输入过的命令 箭头上也代表能够查询以往输入的命令 Ctrl+C 终 ...

  8. CentOS7 修改MAC地址

    CentOS7 修改MAC地址 - mixboot - CSDN博客https://blog.csdn.net/u010953692/article/details/79650522

  9. 【Python3练习题 020】 求1+2!+3!+...+20!的和

    方法一 import functools   sum = 0 for i in range(1,21):     sum = sum + functools.reduce(lambda x,y: x* ...

  10. js压箱底的宝贝

    框架的确好用, 不过他们也隐藏了JavaScript中丑陋的细节和DOM的运作机制. 如果你的目标是敢于自称"我懂JavaScript", 那么花时间学习框架无异于南辕北辙. 下面 ...