本例主要使用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. 初学Python——字符串相关操作

    基本字符串操作 Pyhton中字符串的格式化输出在前面已经总结了,接下来介绍一些常用的字符串操作 先定义一个字符变量,以下的操作都以此为例: name=" my name is china ...

  2. P3374 【模板】树状数组 1--洛谷luogu

    题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某一个数加上x 2.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表示该数列数字的个数和操作的总个数. ...

  3. Intel发6款全新9代i9/i7/i5 CPU：巅峰8核

    在旧金山举办的GDC19活动中,Intel正式发布9代酷睿新品,面向移动平台的H系列标压处理器,定于今年第二季度上市. 换言之,最快4月份我们就能见到搭载后缀H的9代酷睿CPU笔记本(游戏本)等发售了 ...

  4. face recognition[Euclidean-distance-based loss][Center Face]

    本文来自<A Discriminative Feature Learning Approach for Deep Face Recognition>,时间线为2016年.采用的loss是C ...

  5. Feature Extractor[ResNet v2]

    0. 背景 何凯明大神等人在提出了ResNet网络结构之后,对其做了进一步的分析工作,详细的分析了ResNet 构建块能起作用的本质所在.并通过一系列的实验来验证恒等映射的重要性,并由此提出了新的构建 ...

  6. piwik源码安装部署

    一简单介绍1.piwik介绍Piwik是一个PHP和MySQL的开放源代码的Web统计软件,它给你一些关于你的网站的实用统计报告,比如网页浏览人数,访问最多的页面,搜索引擎关键词等等.Piwik拥有众 ...

  7. [翻译] ASP.NET Core 利用 Docker、ElasticSearch、Kibana 来记录日志

    原文: Logging with ElasticSearch, Kibana, ASP.NET Core and Docker 一步一步指导您使用 ElasticSearch, Kibana, ASP ...

  8. 使用PHPExcel解析Excel表格

    安装类库 从GitHub上下载PHPExcel类库 地址:https://github.com/PHPOffice/PHPExcel 解压后将Classes文件夹移动到ThinkPHP的extend目 ...

  9. .NET-记一次架构优化实战与方案-目录

    前言 本系列是根据我公司的某块业务优化进行改写的,为了避免触发法律的红线,我对部分代码做了截取并打码. 因为优化方案是针对现有业务的问题情况进行的,不做任何太过过分吹牛逼.一切以基于现有的业务,优化处 ...

  10. 朱晔和你聊Spring系列S1E9：聊聊Spring的那些注解

    本文我们来梳理一下Spring的那些注解,如下图所示,大概从几方面列出了Spring的一些注解: 如果此图看不清楚也没事,请运行下面的代码输出所有的结果. Spring目前的趋势是使用注解结合Java ...