ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面。
下面我们来简单用 ajax在本地做一个接收并处理json的小例子
首先我们要新建一个叫做data的json文件data.json。
data.json文件内容是:
[
{"name":"小明","sex":"男","address":"北京","job":"web前端工程师"}
]
如图,我们要实现单击 图中点击按钮通过ajax取到data.json文件中的数据并处理完成显示在页面中。
页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<style>
*{margin:0;padding:0px;font-size: 12px;}
a{text-decoration: none;}
ul{list-style: none;}
#box{width:500px;margin:20px auto;}
.btn{display:block;width:50px;height:50px;margin:20px auto;line-height: 50px;text-align: center;border:1px #000 solid;color:#000;transition:.3s linear;}
.btn:hover{background: #000;color:#fff;font-weight: bold;}
#con{margin-top:20px;}
#con li{line-height: 30px;text-align: center;}
</style>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('.btn').on('click', function(){
$.ajax({
type: "GET", //请求的方式,也有POST请求
url: "data.json", //请求地址,后台提供的,这里我在本地自己建立了个json的文件做例子
data: {name:name},//data是传给后台的字段,后台需要哪些就传入哪些
dataType: "json", //json格式,后台返回的数据为json格式的。
success: function(result){
var dataObj = result, //返回的result为json格式的数据
con = "";
$.each(dataObj, function(index, item){
con += "<li>姓名:"+item.name+"</li>";
con += "<li>性别:"+item.sex+"</li>";
con += "<li>现居地:"+item.address+"</li>";
con += "<li>岗位:"+item.job+"</li>";
});
console.log(con); //可以在控制台打印一下看看,这是拼起来的标签和数据
$("#con").html(con); //把内容入到这个div中即完成
}
})
})
})
</script>
</head>
<body>
<div id="box">
<a class="btn" href="javascript:;">点击</a>
<ul id="con"></ul>
</div>
</body>
</html>
$.ajax中的url参数地址是后台提供的接口链接地址。
data是需要传给后台开发人员的标识名称,方便后台根据名称在数据库中查找到需要的数据并返回json格式的数据给前端。相同域名下dataType: 'json',不同域名下也就是跨域请求需要用dataType: 'jsonp'
请求成功后把数据通过$.each遍历输出。
jquery ajax详情参数用法可以自行百度搜索。
ajax接收遍历处理json格式数据的更多相关文章
-
Ajax返回html和json格式数据
Ajax可以返回text和xml格式 可以用Ajax返回大段的html文本和json格式的字符串,然后用eval()方法 转化为json对象 php中的json编码:json_encode(); ph ...
-
springmvc通过ajax异步请求返回json格式数据
jsp 首先创建index.jsp页面 <script type="text/javascript"> $(function () { $("#usernam ...
-
Ajax请求ashx 返回 json 格式数据常见问题
问题:ashx 返回的字符串json格式,在前台ajax自动解析失败. 问题分析:经过排查,发现是拼接json时出现” ’ “单引号,jquery无法解析,用” “ “双引号才可以.例如: stri ...
-
用springmvc的@RequestBody和@ResponseBody 接收和响应json格式数据
1.controller @Controller @RequestMapping("/rest/v1") public class WelcomeController { @Req ...
-
ajax接收处理json格式数据
ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面. 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做data的jso ...
-
使用jQuery发送POST,Ajax请求返回JSON格式数据
问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...
-
ajax请求后台,返回json格式数据,模板!
添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术.将返回的json格式数据,添加到select标签下. <script type="te ...
-
springmvc4.0配置ajax请求json格式数据
1.导入相关jar包:jackson-annotation-2.5.4.jar,jackson-core-2.5.4.jar,jackson-databind-2.5.4.jar. 2.spring- ...
-
SpringMVC 实现返回一段数据 &; 实现自动发送json格式数据 - AJAX
实现返回一段数据 - AJAX 当页面通过AJAX来访问Controller时,期望得到的不是一个页面而是一段数据,此时可以使用如下方法,直接向相应中写入数据: /** * 直接向响应中写出数据,通常 ...
随机推荐
-
angularjs 弹出框 $modal
angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报 分类: Angularjs(3) $modal只有一 ...
-
liunx下tomcat启动 Cannot find ./catalina.sh
执行启动tomcat命令./startup.sh 提示 Cannot find ./catalina.sh The file is absent or does not have execute pe ...
-
Python 基礎 - 用戶交互程序
現在就來寫一個簡單的 用戶輸入 的程式,這是一個互動模式,需要使用者自已輸入 #!/usr/bin/env python3 # -*- coding:utf-8 -*- username = inpu ...
-
android在Data目录内置可删除的APP
一.准备工作:make_ext4fs.mkuserimg.sh.simg2img,把它们跟要修改的 .img.ext4(或.img)文件放置到同一个目录下 二.转换源文件为img格式( .img则略过 ...
-
Java从零开始学四十四(多线程)
一.进程与线程 1.1.进程 进程是应用程序的执行实例. 进程是程序的一次动态执行过程,它经历了从代码加载.执行到执行完毕的一个完整过程,这个过程也是进程本身从产生.发展到最终消亡的过程 特征: 动态 ...
-
JDBC 学习笔记(二)—— 大数据+存储过程+批处理+事务管理
本文目录: 1.使用JDBC处理大数据 2.使用JDBC处理大文本 3.使用JDBC处理二进制数据 4.Oracle中大数据处理 5 ...
-
ios开发之C语言第4天
自增和自减运算 自增运算符 ++ 自增表达式 1>.前自增表达式. int num = 1; ++num; 2>.后自增表达式 int num = 1; n ...
-
使用SpringMvc调用POI jar导出excel的源码
@RequestMapping(value = "/result/export") public String export(ResultIn in,HttpServletRequ ...
-
用pip下载的python模块怎么在PyCharm中引入报错
在IDE中导入下载的模块,比如:numpy模块 你会发现虽然你安装了numpy模块,在CMD中python可以import numpy,但是你在PyCharm引不进去,为什么呢?你要是有注意的话,安装 ...
-
Tomcat配置文件入门
转自:http://blog.csdn.net/jubincn/article/details/4856293 Tomcat 基本配置 tomcat读取配置文件 首先简单说一下tomcat是如何读取配 ...