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.imgSrc);
    },
    error: function (xOptions, textStatus) {
    }
});

第1个需要注意的地方是 callbackParameter，如果没有专门的 callback 函数，一定要写上 "callback"；

第2个需要注意的地方是在 success 回调函数中，直接通过变量名 originImgSrc 得到的是 undefined，需要通过 xOptions.data.imgSrc 获取。

赞 (0)

相关推荐

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

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

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

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

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

  • 浅谈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

  • 详解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插件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

  • jQuery+json实现的简易Ajax调用实例

    本文实例讲述了jQuery+json实现的简易Ajax调用.分享给大家供大家参考,具体如下: Userservlet.java代码: package com.iss.servlet; import org.json.JSONException; import org.json.JSONObject; import com.iss.pojo.User; import com.iss.util.JSONUtil; public class UserServlet extends HttpServle

  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

    jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr

  • 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

  • jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

    本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法

    jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法

    本文实例讲述了jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法.分享给大家供大家参考.具体如下: 这里介绍jQuery图片左右拖拽特效,无滚动条,将多张图片组合在一起形成的效果,插件使用的是jquery.nicescroll.js,拖动过程中不会出现滚动条,这样更美观了一些,若需要此效果,可参见下边框中的代码. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

  • jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法.分享给大家供大家参考.具体如下: 左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了. 运行效果截图如下: 在线演示地址如下: http://d

  • jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

    本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • jQuery ajax调用webservice注意事项

    jquery ajax调用webservice(C#)要注意的几个事项: 1.web.config里需要配置2个地方 <httpHandlers> <remove verb="*" path="*.asmx"/> <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.

  • 分享2个jQuery插件--jquery.fileupload与artdialog

    分享2个jQuery插件--jquery.fileupload与artdialog

    这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法! 简单用代码举例子 最小化的方法 复制代码 代码如下: data-url是上传后执行上传文件的php方法 <input id="fileupload" type="file" name="

随机推荐