本例主要使用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. 二.css介绍

    一.三种引入样式1.内嵌样式:写在html中 style标签里面2.行内样式:写在具体的标签的style属性3.引入外部样式表:可以将样式规则写在外部文件,再引入到html中 <link typ ...

  2. shut immediate 数据库遭遇 ORA-24324 ORA-24323

    SQL> shut immediateORA-24324: service handle not initializedORA-24323: value not allowedORA-27140 ...

  3. VsCode云端版本

    VsCode的云端版与客户端简直是一模一样. 官网地址为:https://coder.com/ 安装命令: docker run -t -p 127.0.0.1:8443:8443 -v " ...

  4. [MicroPython]TPYBoardv102超全DIY案例一览

    TPYBoardv102是一款比较成熟和经典的MicroPython开发板,不仅适用于学习实验还能应用于大型的工业级开发,是MicroPython入门和研发的不二之选.下面我们就扒开v102的“层层外 ...

  5. Hive执行sql文件

    方法1: hive -f sql文件 t.sql文件内容: ; 执行命令 hive -f t.sql 方法2: 进入hive shell, 执行source命令 进入hive 终端 $ hive hi ...

  6. Java8-1-新特性_Lambda表达式

    最近实在是闲的蛋疼, 突然想起前一段时间使用Lambda表达式觉得惊为天人, 所以就去仔细的学习了一下, 整理出一份博客出来供大家观赏. 一. 什么是lambda表达式. Lambda 是一个匿名函数 ...

  7. 持续集成之单元测试篇——WWH(讲讲我们做单元测试的故事)

    持续集成之单元测试篇--WWH(讲讲我们做单元测试的故事) 前言 临近上线的几天内非重大bug不敢进行发版修复,担心引起其它问题(摁下葫芦浮起瓢) 尽管我们如此小心,仍不能避免修改一些bug而引起更多 ...

  8. iOS开发简记（7）：网络请求模块

    主流的APP都少不了跟服务器交互,网络请求是少不了的事情. 开源的网络请求库,有很多,比如:AFNetworking.YTKNetwork.PPNetworkHelper.ASIHttpRequest ...

  9. JSP页面的基本元素

    JSP页面元素构成:静态内容.指令.表达式.小脚本.声明.注释. JSP指令包括: page指令:通常位于jsp页面的顶端,同一个页面可以有多个page指令. include指令:将一个外部文件嵌入到 ...

  10. Python classmethod 修饰符

    描述 classmethod修饰符对应的函数不需要实例化,不需要self参数,但第一个参数需要是表示自身类的cls参数,可以调用类的属性,类的方法,实例化对象等. 语法 classmethod语法: ...