jquery ajax中使用jsonp的限制解决方法

jsonp 解决的是跨域 ajax 调用的问题。为什么要跨域 ajax 调用呢？这样可以在一个应用中直接在前端通过 js 调用另外一个应用（在不同的域名下）的 API。
我们在实际应用中也用到了 jsonp ，但之前只知道 jsonp 的一个限制，只能发 get 请求，get 请求的弊端是请求长度有限制。
今天，发现 jsonp 的另外一个限制（在jquery ajax的场景下） —— 不会触发 $.ajax 的error callback，示例代码如下：

代码如下:

$.ajax({
    dataType: 'jsonp',           
    error: function (xhr) {
        //出错时不会执行这个回调函数
    }
});

这个限制由 jsonp 的实现机制决定。

解决方法：

使用一个 jquery 插件 —— jquery-jsonp，https://github.com/jaubourg/jquery-jsonp

示例代码：


代码如下:

<script src="https://raw.github.com/jaubourg/jquery-jsonp/master/src/jquery.jsonp.js"></script>

代码如下:

$.jsonp({
    url: '',
    success: function (data) {
    },
    error: function (xOptions, textStatus) {
        console.log(textStatus);
    }
});

当 jsonp 请求出错时，比如 404 错误，error 回调函数会执行，输出字符串"error"。

赞 (0)

相关推荐

  • 浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用

    JSON和JSONP   JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息.   JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON).   JSON是一种数据格式,JSONP是一种数据调用方式. 复制代码 代码如下: //JSON  {  "name": "sb"  } 复制代码 代码如下: //JSONP  callback({  &q

  • jQuery插件jQuery-JSONP开发ajax调用使用注意事项

    JSONP 调用示例代码: 复制代码 代码如下: var originImgSrc = 'cnbogs-logo.gif';$.jsonp({    url: '',    data: { imgSrc: originImgSrc },    callbackParameter: "callback",    success: function (newImgSrc, textStatus, xOptions) {        console.log(xOptions.data.im

  • 详解JavaScript中jQuery和Ajax以及JSONP的联合使用

    借助于 XMLHttpRequest,浏览器可以在整个页面不刷新的情况下与服务端进行交互,这就是所谓的 Ajax(Asynchronous JavaScript and XML).Ajax 可以为用户提供更为丰富的用户体验. Ajax 请求由 JavaScript 驱动,通过 JavaScript 代码向 URL 发送一个请求,待服务端有响应时会触发一个回调函数,可以在这里回调函数里面处理服务端返回的信息.由于整个发送请求和响应的过程是异步的,所以在此期间页面中其它 Javascript 代码仍

  • 全面解析Ajax和jsonp使用总结

    前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax •定义:一种发送http请求与后台进行异步通讯的技术. •原理:实例化xmlhttp对象,使用此对象与后台通信. ajax的同源策略: •ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全考虑. ---------------------------------------------------------------------

  • 跨域请求之jQuery的ajax jsonp的使用解惑

    跨域请求之jQuery的ajax jsonp的使用解惑

    直接执行了error方法提示错误--ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解:出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解.于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下! 首先,贴出可以成功执行的代码: (页面部分) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

  • jquery ajax中使用jsonp的限制解决方法

    jsonp 解决的是跨域 ajax 调用的问题.为什么要跨域 ajax 调用呢?这样可以在一个应用中直接在前端通过 js 调用另外一个应用(在不同的域名下)的 API.我们在实际应用中也用到了 jsonp ,但之前只知道 jsonp 的一个限制,只能发 get 请求,get 请求的弊端是请求长度有限制.今天,发现 jsonp 的另外一个限制(在jquery ajax的场景下) -- 不会触发 $.ajax 的error callback,示例代码如下: 复制代码 代码如下: $.ajax({  

  • 当jquery ajax遇上401请求的解决方法

    jquery ajax是个很常用接口,而在请求时候,可能存在响应401的情况(身份认证过期或未登录),比较容易出现在混合应用上,如何进行身份认证,重发失败请求,还是值得注意的. ajax请求有两种方式 1. 回调 最常写的方式,成功失败处理以回调方式传入. $.ajax({ ajax参数... success : xxxxxx error: xxxxxx }); 2. Deferred方式 Deferred模式我在<js异步编程>有说明, ajax调用本身返回就是一个Deferred对象,成功

  • jquery ajax return没有返回值的解决方法

    大家先看一段简单的jquery ajax 返回值的js 复制代码 代码如下: function getReturnAjax{ $.ajax({ type:"POST", url:"ajax/userexist.aspx", data:"username="+vusername.value, success:function(msg){ if(msg=="ok"){ showtipex(vusername.id,"&l

  • 原生js jquery ajax请求以及jsonp的调用方法

    ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待 异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高 ajax的语言载体是JavaScript,最大的特点是页面不刷新 1.获取ajax对象 主流浏览器获取方式:火狐.谷歌.

  • 理解jquery ajax中的datatype属性选项值

    jquery中ajax的dataType属性用于指定服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断,如果datatype选项不填写的话,会将返回的数据当成字符串处理. 一.ajax语法 复制代码 代码如下: jQuery.ajax([settings]) 参数说明 settings:用于配置 Ajax 请求的键值对集合.可以通过 $.ajaxSetup() 设置任何选项的默认值. 二.ajax的datatype选项的值 1."xml":返回

  • jquery中的常见问题及快速解决方法小结

    1 在开发开放聊天室的过程中,遇到使用ajax提交表单插入数据库时会插入两条数据的情况 解决办法,在ajax函数返回后,return false. $("#btn").click(function(){ $.ajax({ do something }); return false; }) 2 去除选中元素的某一个属性使用removeattr 3 javascript中与时间相关的函数有setInterval("function",millisec[,"la

  • JQuery ajax中error返回错误及一直返回error的解答

    进入百度搜索此问题,发现有人这么说了一句 Jquery中的Ajax的async默认是true(异步请求),如果想一个Ajax执行完后再执行另一个Ajax, 需要把async=false就可以了 于时我在ajax中进行了处理 async: false,结果发现提交正常的数据返回是正常的没有错误. 代码如下 $.ajax({ type: "POST", async: false, url:urllink, data:data, dataType:"html", succ

  • jQuery ajax中使用confirm,确认是否删除的简单实例

    jQuery ajax 中使用confirm ,确认是否删除按钮 onclick="return confirm('确认删除?');" <script type="text/javascript"> $(function(){ $("#btnDelete").click(function(){ //var user8ID = $.trim( $('#user8ID').val() ); var statu = confirm(&quo

  • IE9 IE8 ajax跨域问题的快速解决方法

    网上解决办法均是 在发起请求之前添加 jQuery.support.cors=true;但是,线下测试,是ok的,一放到服务器上,又出现了新的eroor:readyState: 0, status: 0, statusText: "Error: 拒绝访问... 最后,问题是这样解决的,点击IE浏览器的的"工具->Internet 选项->安全->自定义级别"将"其他"选项中的"通过域访问数据源"选中为"启用&

  • bootstrap+jquery项目引入文件报错的解决方法

    做一个项目的时候 ,控制台总是会出现各种bug,其实不用慌张,终结起来也就几种类型的错误,在开发中每次遇到错误都善于总结,下次在看到就会胸有成竹知道是什么情况了,以下是在开发过程中总结的一些错误以及错误的解决方法. 报错一:Uncaught ReferenceError: $ is not defined Uncaught ReferenceError: $ is not defined Uncaught ReferenceError: jQuery is not defined 错误原因:文件

随机推荐