ajax接收处理json格式数据
ajax在前后端的交互中应用非常广泛，通过请求后台接口接收处理json格式数据展现在前端页面。
下面我们来简单用 ajax在本地做一个接收并处理json的小例子
首先我们要新建一个叫做data的json文件data.json。
data.json文件内容是：
[
{"name":"小海","sex":"男","address":"上海","job":"算法工程师"}
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<style>
*{margin:;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 # solid;color:#;transition:.3s linear;}
.btn:hover{background: #;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: "POST", //请求的方式，也有get请求
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遍历输出。
ajax接收处理json格式数据的更多相关文章
- 使用jQuery发送POST，Ajax请求返回JSON格式数据
问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...
- 发送Ajax请求获取JSON格式数据
Aspx前端页面: <script type="text/javascript"> $(function () { $.getJSON("Ajax/TestA ...
- Flask(python)异步（ajax）返回json格式数据
主要讨论两个问题,第一个是关于json.dumps 与jsonify区别,第二个是几种异步的区别(见jQuery中的$.getJSON.$.ajax.$.get.$.post的区别). json.du ...
- ajax接收遍历处理json格式数据
ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面. 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做data的jso ...
- Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用
1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
- Ajax返回html和json格式数据
Ajax可以返回text和xml格式 可以用Ajax返回大段的html文本和json格式的字符串,然后用eval()方法 转化为json对象 php中的json编码:json_encode(); ph ...
- $.ajax返回的JSON格式的数据后无法执行success的解决方法
近段时间做项目,在项目使用了ajax技术,遇到了一个奇怪的问题:"$.ajax返回的JSON格式的数据无法执行success",代码是这样写的: 1 $.ajax({ 2 .. 3 ...
- 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- ...
随机推荐
- <东方梦符祭> N1无尽30波终于通了
嘛也算是第一次通关 纪念一下 阵容:xjb搭的杂牌队 主C:古明绝恋 露米娅(真·R卡战神)比那名居天子 斯卡雷特 控制:琪露诺 蕾蒂 灵梦 挂件:小伞 纳兹琳 古明地觉 永江依玖 第一发就直接抽到了 ...
- block: cfq 学习01
CFQ,即Completely Fair Queueing绝对公平调度器,力图为竞争块设备使用权的所有进程分配一个等同的时间片,在调度器分配给进程的时间片内,进程可以将其读写请求发送给底层块设备,当进 ...
- 洛谷——P1475 控制公司 Controlling Companies
P1475 控制公司 Controlling Companies 题目描述 有些公司是其他公司的部分拥有者,因为他们获得了其他公司发行的股票的一部分.(此处略去一句废话)据说,如果至少满足了以下三个条 ...
- 1.Ubuntu查看Python版本
1.输入命令:ls -l /usr/bin/python*
- JavaScript学习总结（12）——2016 年 7 个顶级 JavaScript 框架
当涉及到Web开发时,JavaScript框架往往是一些开发人员和企业最受欢迎的平台.可能,你有机会尝试过一两个顶级的JavaScript框架,但你仍然有点不确定哪个才是最佳的最值得掌握的,或者哪个值 ...
- nyoj 911 Registration system（map)
Registration system 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 A new e-mail service "Berlandesk&q ...
- 高数(A)下 第十章
10.1 10.2 10.3 10.4 10.5 10.7 自测题
- VCS 一次使用。
One database was down today. So I login the server try to check and fix it. I found the Oracle home ...
- jQuery -> 获取／设置HTML或TEXT内容
jQuery提供了两个API能够直接用来为元素加入内容. html() text() 当中html()是为指定的元素加入html内容 text()是为指定的元素加入文本内容 两者的差别在于,text中 ...
- 一致性哈希server的数据维护
本文是实例说明一致性哈希server的数据维护用途. 理论说明參考:http://blog.csdn.net/chenjiayi_yun/article/details/41624603 例如以下图所 ...