jquery的ajax异步请求接收返回json数据实例


Posted in Javascript onJune 16, 2014

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。

代码示例如下:

$('#send').click(function () {

    $.ajax({

        type : "GET",

        url : "a.php",

        dataType : "jsonp",

        success : function (data) {

            $.each(data.items, function (i, item) {

                $("<img class='para'/> ").attr("src", item.media.m).appendTo("#resText");

                if (i == 3) {

                    return false;

                }

            });

        }

    });

});

$.ajax方法如下:

$.ajax({ 

   type: "POST",

   url:  ctxRoot+'FolderAction!saveInformSetting.action',

   data: 'jsonStr=' + inform_settingListStr,

   dataType: "json",

   complete: function(data){

       //在这里做些事情,假设返回的json数据里有name这个属性

       //有时候可以直接data.name或者data['name']去访问

       //但有时候,却要通过var jsonData = eval("("+data.responseText+")");才可以通过jsonData.name访问,而且这种情况下,需要是complete而不是success

   }

   });

$.ajax(options)

这是最根本的JQuery Ajax方法,只有一个参数options,该options参数中包含了请求信息和回调函数的信息。参数内容都是key:value对形式出现,并且都是可选的。

语法如下:

$.ajax({options});
url:(string)发送请求的地址,可以是服务器页面也可以是WebService动作。
type:(string)请求方式,POST或GET
data:(object)向服务器发送请求时带去的数据。是key:value对形式,如:{name:"grayworm",sex:"male"},如果是数组{works:["work1","work2"]}
dataType:(string)预期返回的数据类型。xml,html,json,text等
beforeSend:(Function)发送ajax请求前被触发,如果返回false则取消本次请求。如果异步请求需要显示gif动画,那应当在这里设置相应<img>的可见。

Javascript 相关文章推荐
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 #Javascript
javascript进行数组追加方法小结
Jun 16 #Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 #Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 #Javascript
js限制文本框只能输入数字方法小结
Jun 16 #Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 #Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 #Javascript
You might like
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
php防止用户重复提交表单
2015/11/02 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python getpass模块用法及实例详解
2019/10/07 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
上班睡觉检讨书
2014/01/09 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
maven依赖的version声明控制方式
2022/01/18 Java/Android
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers