本例主要使用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. 002_pip安装失败

    一.安装cmdb的驱动遇到了如下问题 [root@localhost 003_pyenv]# pip2.7 install cmdb_sdk==0.3.1 -i http://cmdb.elenet. ...

  2. 2017-2018-2 20155314《网络对抗技术》Exp7 网络欺诈防范

    2017-2018-2 20155314<网络对抗技术>Exp7 网络欺诈防范 目录 实验目标 实验内容 实验环境 基础问题回答 预备知识 实验步骤 1 利用setoolkit建立冒名网站 ...

  3. Java NIO2：NIO概述

    一.概述 从JDK1.4开始,Java提供了一系列改进的输入/输出处理的新特性,被统称为NIO(即New I/O).新增了许多用于处理输入输出的类,这些类都被放在java.nio包及子包下,并且对原j ...

  4. vue-cli sass安装

    一.安装对应依赖node模块: npm install node-sass --save-dev npm install sass-loader --save-dev 二.打开webpack.base ...

  5. element-ui中 table表格hover 修改背景色

    增加样式级别就行啦   .el-table--enable-row-hover .el-table__body tr:hover>td{ background-color: #212e3e !i ...

  6. 读写分离子系统 - C# SQL分发子系统（目前只支持ADO.NET）

    这次介绍的这个框架只适用于中小项目,并且各个读写数据库结构是一致的情况,还要并且是写入数据库只有1台情况. 我们来看看这个子系统适用的场景: 我们来看这个子系统的配置文件: <?xml vers ...

  7. Full Regularization Path for Sparse Principal Component Analysis

    目录 背景 Notation Sparse PCA Semidefinite Relaxation Low Rank Optimization Sorting and Thresholding 背景 ...

  8. CodeForces 719A. Vitya in the Countryside

    链接:[http://codeforces.com/group/1EzrFFyOc0/contest/719/problem/A] 题意: 给你一个数列(0, 1, 2, 3, 4, 5, 6, 7, ...

  9. mysql处理重复数据

    有些 MySQL 数据表中可能存在重复的记录,有些情况我们允许重复数据的存在,但有时候我们也需要删除这些重复的数据. 防止表中出现重复数据 你可以在MySQL数据表中设置指定的字段为 PRIMARY ...

  10. C#跨进程读取listview控件中的数据

    http://www.cnblogs.com/Charltsing/p/slv32.html 欢迎交流:QQ564955427 读取标准的32位listview控件中的数据,网上已经有很多代码了.今天 ...