本例主要使用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. day15--认识模块、导入模块、自执行与模块的区别

    一.认识模块 什么是模块? 模块本质是一些功能的集合体 创建的一个py文件就是一个模块 使用模块: 在使用模块的py文件中 通过  import 或者 from import导入模块 模块的优点: 可 ...

  2. fastjson 返回json字符串，JSON.parse 报错

    这是由于转义字符引起的如 : \ , fastjson 处理后是双反斜杠:\\ ,而 JSON.parse 解析时需要4个反斜杠 ,即 js解析json 反斜杠时,需要 4个 解成 1 个 解决方法: ...

  3. MySQL笔记--注意

    replace into 和 insert into..... on duplicate key update的异同 同:1. 当key不存在时,两者相同,都是插入一条数据2. key存在时,执行两者 ...

  4. 配置Nginx虚拟主机

    实验环境 一台最小化安装的CentOS 7.3虚拟机 配置基本环境 1. 安装nginx yum install -y epel-* yum isntall -y nginx vim 2. 建立虚机主 ...

  5. 关于NETCORE中的捆绑与最小化 以及与CDN连用

    参考文档:MSDN   Bundling and minification in ASP.NET Core 细说ASP.NET Core静态文件的缓存方式

  6. 如何解决 Windows 实例出现身份验证错误及更正 CredSSP

    阿里云上的ESC赠送1核2G服务器,安装windows server 2016 Datacenter 3389远程登录时提示错误信息,参考阿里文档:https://help.aliyun.com/kn ...

  7. Javascript 小练习

    --------------------------要收获别人五年才能收获的东西,你就要做好准备,遭受别人五人所遭受的坎坷” // -------------------------------*** ...

  8. 三、临时弹出一个QQ对话窗口

    第一种:需要添加好友才可以访问 <a href="http://wpa.qq.com/msgrd?v=3&uin=317985559&site=qq&menu= ...

  9. 【转】RCP中org.eclipse.core.runtime.CoreException

    org.eclipse.core.runtime.CoreException: Plug-in TRAIN was unable to load class train.Application. 利用 ...

  10. stark组件之delete按钮、filter过滤

    1.构建批量删除按钮 2.filter过滤 3.总结+coding代码 1.构建批量删除按钮 1.admin中每个页面默认都有 2.stark之构建批量删除 3.coding {% extends ' ...