Ajax之Jquery封装使用举例2（Json和JsonArray处理）
本例主要使用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处理）的更多相关文章
- Ajax之Jquery封装使用举例
<html> <head> <meta charset="UTF-8"> <title>登陆页面</title> < ...
- jQuery Ajax 二次封装
jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%> ...
- Jquery封装ajax
Jquery封装ajax Load方法 <!-- 将jquery.js导入进来 --> <script type="text/javascript&qu ...
- 模仿JQuery封装ajax功能
需求分析 因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...
- jQuery 封装的ajax
jquery封装的ajax 具体操作: $.get(url [,data] [,fn回调函数] [, dataType]); data:给服务器传递的数据,请求字符串 .json对象 都可以设 ...
- 不借助jquery封装好的ajax，你能用js手写ajax框架吗
不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...
- Jquery发送ajax请求以及datatype参数为text/JSON方式
Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...
- Jquery封装的ajax的使用过程发生的问题
Jquery封装的ajax的使用过程发生的问题 今天在做项目的时候使用到了ajax来完成项目前后端数据交互,在之后发现在前端没有数据显示,而后端数据确实存在,在多次检查代码之后,发现代码并不存在问题, ...
- ajax的再次封装！(改进版) —— new与不 new 有啥区别？
生命不息重构不止! 上一篇写了一下我对ajax的再次封装的方法,收到了很多有价值的回复,比如有童鞋建议用$.extend,一开始还以为要做成插件呢,后来才知道,原来这个东东还可以实现合并.省着自己再去 ...
随机推荐
- Spring配置中的"classpath:"与"classpath*:"的区别研究（转）
Spring配置中的"classpath:"与"classpath*:"的区别研究(转) 概念解释及使用场景: classpath是指WEB-INF文件夹下 ...
- WPF---Binding学习(一)
转自:http://blog.csdn.net/lisenyang/article/details/18312199 1,Data Binding在WPF中的地位 程序的本质是数据+算法.数据会在存储 ...
- JS中caller和callee
caller: caller是函数对象的一个属性,指的是这个函数对象的调用者,如果调用者,如果是顶层调用者,则返回null. 例: function func(){ console.log(func. ...
- Clustering[Evaluation]
0. 背景 评估(或者说验证)聚类结果就如同聚类本身一样困难.通常的方法有内部评估和外部评估这两种: 内部评估的方法:通过一个单一的量化得分来评估算法好坏:该类型的方法 外部评估的方法:通过将聚类结果 ...
- STM32中断优先级彻底讲解
一.综述 STM32 目前支持的中断共为 84 个(16 个内核+68 个外部), 16 级可编程中断优先级的设置(仅使用中断优先级设置 8bit 中的高 4 位)和16个抢占优先级(因为抢 ...
- "INSTALL_FAILED_DUPLICATE_PERMISSION "错误解决
我们在进行Android组件安全测试时,如果遇到声明了权限的组件,在编写PoC时,可能会遇到如下错误提示: INSTALL_FAILED_DUPLICATE_PERMISSION perm=com.m ...
- Maven学习第2期---Maven安装配置
一.Maven介绍 1.1 何为Maven Maven这个词可以翻译为"知识的积累",也可以翻译为"专家"或"内行".Maven是一个跨平台 ...
- 调试CAS源码步骤
1.先安装gradle2.eclipse安装gradle(sts)插件3.克隆cas源码 这一块需要很长时间4.gradle build 会遇到安装node.js 的模块 不存在的问题. 按提示解决就 ...
- 高并发下的Java数据结构(List、Set、Map、Queue)
由于并行程序与串行程序的不同特点,适用于串行程序的一些数据结构可能无法直接在并发环境下正常工作,这是因为这些数据结构不是线程安全的.本节将着重介绍一些可以用于多线程环境的数据结构,如并发List.并发 ...
- 反射那点基础-Method
目录 1 获取 Method 1.1 方法 1.2 实例 2 Method 的方法 2.1 Java 方法基础知识 2.2 修饰符相关方法 2.2.1 获取修饰符 2.2.2 判断是否为 defaul ...