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格式数据的更多相关文章

  1. Ajax返回html和json格式数据

    Ajax可以返回text和xml格式 可以用Ajax返回大段的html文本和json格式的字符串,然后用eval()方法 转化为json对象 php中的json编码:json_encode(); ph ...

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

    jsp 首先创建index.jsp页面 <script type="text/javascript"> $(function () { $("#usernam ...

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

    问题:ashx 返回的字符串json格式,在前台ajax自动解析失败. 问题分析:经过排查,发现是拼接json时出现” ’  “单引号,jquery无法解析,用” “ “双引号才可以.例如: stri ...

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

    1.controller @Controller @RequestMapping("/rest/v1") public class WelcomeController { @Req ...

  5. ajax接收处理json格式数据

    ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面. 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做data的jso ...

  6. 使用jQuery发送POST，Ajax请求返回JSON格式数据

    问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...

  7. ajax请求后台，返回json格式数据，模板！

    添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术.将返回的json格式数据,添加到select标签下. <script type="te ...

  8. 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- ...

  9. SpringMVC 实现返回一段数据 & 实现自动发送json格式数据 - AJAX

    实现返回一段数据 - AJAX 当页面通过AJAX来访问Controller时,期望得到的不是一个页面而是一段数据,此时可以使用如下方法,直接向相应中写入数据: /** * 直接向响应中写出数据,通常 ...

随机推荐

  1. 利用JPEGImageEncoder进行简单的图片压缩

    import java.awt.Dimension; import java.awt.Image; import java.awt.image.BufferedImage; import java.i ...

  2. ThinkPHP框架搭建及常见问题（Apache或MySQL无法启动）----简单的初体验

    有一定基础的人勿进,这篇讲的只是零基础入门,都是我刚接触以及我所了解到的人刚开始有疑惑的地方,具体框架介绍会在后面的博客中介绍 这一篇只是为了一个简单的页面显示而介绍的方法,不涉及代码,开发环境,所以 ...

  3. zoj 1200 Mining

    这道题被划到了动态规划里面去了,结果就是一道模拟题,懒了一点,直接用stl的优先队列,重载了一下运算符,写的时候保证只能一个在采,因为如果需要的采的次数比可以生产的次数少,那么生产的次数等于需要采的次 ...

  4. （原）android的JNI中使用C++的类

    android的JNI代码中可以调用C++的类,但是不能直接调用,要加上一个类似于接口的java类,这个类内部调用C++的类.实际上和接口类直接调用C++中的函数差不多,只是稍微复杂了一点. 1. 写 ...

  5. html5学习笔记2

    css3选择器 1.通过元素的关键字,如p,div等 2.通过id属性 3.通过class属性引用 3.1通过class属性引用p标签,如:p.text{}//text样式只适用于p 4.通过任意键引 ...

  6. Scrapy：python3下的第一次运行测试

    1,引言 <Scrapy的架构初探>一文讲解了Scrapy的架构,本文就实际来安装运行一下Scrapy爬虫.本文以官网的tutorial作为例子,完整的代码可以在github上下载. 2, ...

  7. HDU 2553 N皇后问题（dfs）

    N皇后问题 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Description 在 ...

  8. SQL Server 性能篇- 碎片

    本文分为两个问题: 第一,碎片是什么:第二,碎片怎么处理: 现在,来找解决这两个问题:  一.碎片是什么 说到碎片,就要提到索引了,索引用着挺爽的啊!是的,一旦索引建立,我们搜索数据的效率就提高了:然 ...

  9. Oracle EBS-SQL (INV-6):检查监督帐户别名处理.sql

    select MSI.SEGMENT1                                 项目编码,       MSI.DESCRIPTION                      ...

  10. USB OTG介绍（转载）

    1. 概要 OTG设备使用插头中的ID引脚来区分A/B Device,ID接地被称作为A-Device,为连接时候的USB Host,A-Device始终为总线提供电力,ID悬空被称作为B-Devic ...