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- ...
随机推荐
- Ceres
sudo apt-get install liblapack-dev libsuitesparse-dev libcxspares3.1.2 libgflags-dev libggoogle-glog ...
- EF-基础用法
一丶LINQ TO SQL 语法 基本格式: from c in 表名 where 条件 select c 二丶LINQ简介 LINQ是Language Integrated Query的简称,它是 ...
- Dollar Dayz POJ - 3181
解法 完全背包+大数...不想写大数了放个python得了 代码 dp=[0 for i in range(2000)] n,k=map(int,input().split()) num=[i for ...
- Ztree加载完成后显示勾选节点
①前言:这个在度娘上没有搜到解决的办法,于是自己查看了ztree的API,发现其实还是比较简单的.做个笔记以备不时之需. ②需求: 像下图一样,在加载完成之后就显示需要勾选的项. ③解决方案: 首先页 ...
- Tampermonkey脚本安装问题及自用脚本推荐
对于高手来说,chrome浏览器中即使没有其他任何chrome插件,可能都无关紧要.但是有一个插件必不可少, 那就是Tampermonkey油猴插件.Tampermonkey是Chrome上最流行的用 ...
- 网络基础——UDP
UDP 1.UDP首部格式 源端口号(16) 目标端口号(16) UDP长度(16) UDP校验和(16) UDP长度:用来指出UDP的总长度 校验和:用来完成对UDP数据的差错检验,它是UDP协议提 ...
- 调试pcb板子的步骤
在从外边焊回来的板子中查找问题的时候,如果只是简单的 一通乱调,很有可能一下子就调好了,但是大多数的时候是调了半天,不知道接下来该如何进行,因此,严格的按照步骤走,是个不错的想法: 1.拿到板子的第一 ...
- 【Codeforces 1063B】Labyrinth
[链接] 我是链接,点我呀:) [题意] 你可以往左最多x次,往右最多y次 问你从x,y出发最多能到达多少个格子 只能往上下左右四个方向走到没有障碍的格子 [题解] 假设我们从(r,c)出发想要到固定 ...
- Java基础学习总结（75）——Java反射机制及应用场景
什么是Java反射机制? JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法:这种动态获取的以及动态调用对象的方法的功能称为 ...
- 免XML的SpringMVC配置
Servlet 3.0以后,新增了一些注解,使得web.xml可以省略掉.这样配合Spring的JavaConfig就可以实现免xml的项目配置,这里简单搭建一个免XML的SpringMVC.Spri ...