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

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

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

  2. 发送Ajax请求获取JSON格式数据

    Aspx前端页面: <script type="text/javascript"> $(function () { $.getJSON("Ajax/TestA ...

  3. Flask(python)异步（ajax）返回json格式数据

    主要讨论两个问题,第一个是关于json.dumps 与jsonify区别,第二个是几种异步的区别(见jQuery中的$.getJSON.$.ajax.$.get.$.post的区别). json.du ...

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

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

  5. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

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

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

  7. $.ajax返回的JSON格式的数据后无法执行success的解决方法

    近段时间做项目,在项目使用了ajax技术,遇到了一个奇怪的问题:"$.ajax返回的JSON格式的数据无法执行success",代码是这样写的: 1 $.ajax({ 2 .. 3 ...

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

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

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

随机推荐

  1. 第二节:1_C#中的委托的使用和讲解(转)

    C# 中的委托 引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容 ...

  2. 【Hadoop】四、HDFS的java接口

      Hadoop是用java语言实现的,因此HDFS有很好的java接口用以编程,重点就是Hadoop的FileSystem类,它是所有文件系统的抽象类,HDFS实例(DistributedFileS ...

  3. JAVA基础——集合类汇总

    一.集合与数组 数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用. ...

  4. Extjs二级联动combo省城市

    Extjs二级联动 Extjs combox根据省查询城市 实现效果如上图所示, store层代码: Ext.define("ExtApp.store.TeacherProvince&quo ...

  5. Python反射、异常处理

    反射 :字符串到对象属性的映射 hasattr(obj,string), 判断对象obj里面是否有叫string的字段或方法 getattr(obj,string) 获取obj对象里名叫string的 ...

  6. 浅谈微信小程序对于房地产行业的影响

    前几日,我们曾经整理过一篇文章是关于微信小程序对于在线旅游业的影响的一些反思(浅谈微信小程序对OTA在线旅游市场的影响),近日由于生活工作的需要走访了一些房地产的住宅商品房,突然想到微信小程序对于房地 ...

  7. 【14】AngularJS 表单

    AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 ...

  8. 最长上升子序列的回溯 ZOJ 2432

    题目大意: 找一组最长上升公共子序列,并把任意一组满足的情况输出出来 最长公共上升子序列不清楚可以先看这篇文章 http://www.cnblogs.com/CSU3901130321/p/41826 ...

  9. mappingLocations、mappingDirectoryLocations与mappingJarLocations 区别 (转)

    mappingLocations.mappingDirectoryLocations与mappingJarLocations 区别 由于spring对hibernate配置文件hibernate.cf ...

  10. 用xtrabackup+binlog恢复误删除的数据库

    关键技术,数据库产生的二进制文件,在主库就是binlog在从库就是relay-log,用最新的物理备份可以新启动个新实例,可以模拟个从库,把主库的binlog复制到新的数据库实例上,利用主从复制和物理 ...