ajax接收遍历处理json格式数据

转载源:http://www.cnblogs.com/dibaosong/p/4572274.html

ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面。

下面我们来简单用 ajax在本地做一个接收并处理json的小例子

首先我们要新建一个叫做data的json文件data.json。

data.json文件内容是:

[
    {"name":"小明","sex":"男","address":"北京","job":"web前端工程师"}
]

如图,我们要实现单击  图中点击按钮通过ajax取到data.json文件中的数据并处理完成显示在页面中。

页面代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ajax</title>
 6     <style>
 7     *{margin:0;padding:0px;font-size: 12px;}
 8     a{text-decoration: none;}
 9     ul{list-style: none;}
10     #box{width:500px;margin:20px auto;}
11     .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;}
12     .btn:hover{background: #000;color:#fff;font-weight: bold;}
13     #con{margin-top:20px;}
14     #con li{line-height: 30px;text-align: center;}
15     </style>
16     <script src="jquery-1.8.3.min.js"></script>
17     <script>
18         $(function(){
19             $(‘.btn‘).on(‘click‘, function(){
20                 $.ajax({
21                     type: "POST", //请求的方式,也有get请求
22                     url: "data.json", //请求地址,后台提供的,这里我在本地自己建立了个json的文件做例子
23                     data: {name:name},//data是传给后台的字段,后台需要哪些就传入哪些
24                     dataType: "json", //json格式,后台返回的数据为json格式的。
25                     success: function(result){
26                         var dataObj = result, //返回的result为json格式的数据
27                         con = "";
28                         $.each(dataObj, function(index, item){
29                             con += "<li>姓名:"+item.name+"</li>";
30                             con += "<li>性别:"+item.sex+"</li>";
31                             con += "<li>现居地:"+item.address+"</li>";
32                             con += "<li>岗位:"+item.job+"</li>";
33                         });
34                         console.log(con);    //可以在控制台打印一下看看,这是拼起来的标签和数据
35                         $("#con").html(con); //把内容入到这个div中即完成
36                     }
37                 })
38             })
39         })
40     </script>
41 </head>
42 <body>
43     <div id="box">
44         <a class="btn" href="javascript:;">点击</a>
45         <ul id="con"></ul>
46     </div>
47 </body>
48 </html>

$.ajax中的url参数地址是后台提供的接口链接地址。

data是需要传给后台开发人员的标识名称,方便后台根据名称在数据库中查找到需要的数据并返回json格式的数据给前端。相同域名下dataType: ‘json‘,不同域名下也就是跨域请求需要用dataType: ‘jsonp‘

请求成功后把数据通过$.each遍历输出。

jquery ajax详情参数用法可以自行百度搜索。

时间: 2024-11-05 18:30:49

ajax接收遍历处理json格式数据的相关文章

Ajax请求ashx 返回 json 格式数据常见问题

问题:ashx 返回的字符串json格式,在前台ajax自动解析失败. 问题分析:经过排查,发现是拼接json时出现” ’  “单引号,jquery无法解析,用” “ “双引号才可以.例如: string strjson="[ { 'userName':'test'}]"; //单引号导致jquery无法自动解析. string strjson="[ {\"userName\":\"test\"}]"; // 双引号可以解析:

AJAX(四)实例 -- json格式数据

本期来讲解在AJAX中使用json格式数据.不过我们先不说json的事,先来做个案例,然后由这个案例我们再来讨论为啥要用json数据,以及怎么用. 一.案例   非常经典,也是非常简单的AJAX案例,省市联动.就是在网上常见的,选择一个省份,然后城市所在的<select>标签中再动态加载进来所选省份包含的城市选项. HTML是极其简单的.为了让案例更简单,省份的<select>标签中的选项都写死了,其中value代表省份的主键id.城市所对应的<select>标签也是如

springmvc通过ajax异步请求返回json格式数据

jsp 首先创建index.jsp页面 <script type="text/javascript"> $(function () { $("#username").click(function () { $.ajax({ url: "list",//请求地址 type: "POST", dataType: "json", success: function(data) {//data是默认的,

SpringMVC环境下实现的Ajax异步请求(JSON格式数据)

一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem

用springmvc的@RequestBody和@ResponseBody 接收和响应json格式数据

1.controller @Controller @RequestMapping("/rest/v1") public class WelcomeController { @RequestMapping(value="/date/json/next", method=RequestMethod.POST,consumes="application/json" ,produces="application/json") @Res

spring mvc+ajax 实现json格式数据传递

使用ajax传递JSON对象 下面示例为ajax发送json对象,返回json格式数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $.ajax({ url: "api/user", type: "POST", timeout: txnTimeOut, async: true, dataType: "json", data: {username : "lucy"}

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-servlet.xml中相关配置: //命名空间加入mvc: xmlns:mvc="http://www.springframework.org/schema/mvc" //xsi:schemaLocation中补充: http://www.springframework.org/sche

ajax请求后台,返回json格式数据,模板!

添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术.将返回的json格式数据,添加到select标签下. <script type="text/javascript">        //加载出部门的信息            function loadGroup(){                            $.ajax({                    type:"post",  

ajax发送json格式数据

前后端在做数据交互的时候 一定一定要表明你所发的的数据到底是什么格式 前段后交互 你不能骗人家,不然后端开发人员来找你的时候会抄着一根凳子腿. 你的数据时什么格式 你就应该准确无误告诉别人是什么格式 那么怎么告诉后端你要发送的数据的格式是什么呢 form 表单是通过 他的 enctype 而 ajax 是通过 contentType,如果你要传送的数据是json(通常只有json格式) 你需要这么写 contentType:'application/json' 要怎样发送一个json格式的数据呢