jquery中的ajax方法怎样通过JSONP进行远程调用

 更新时间:2014年05月04日 11:19:35   作者:   我要评论
这篇文章主要介绍了jquery中的ajax方法怎样通过JSONP进行远程调用,需要的朋友可以参考下
关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用

首先介绍下$.ajax的参数

type:请求方式 GET/POST

url:请求地址

async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步。

dataType:返回的数据类型

jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)

jsonpCallback:自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据

success:调用成功执行的函数

error:异常处理函数

1.示例1

服务器端我们采用MVC的ACTION来返回数据

复制代码 代码如下:

public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
returnView();
}

public ActionResult ReturnJson()
{
string callback = Request.QueryString["callback"];
string json = "{'name':'张三','age':'20'}";
string result = string.Format("{0}({1})", callback, json);
returnContent(result);
}

}

客户端使用jsonp来传输数据
复制代码 代码如下:

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"> </script>
<script type="text/javascript">
functionSendData()
{
$.ajax({
type: "get",
async: false,
url: "/home/ReturnJson",
dataType: "jsonp",
success: function(data){
alert(data.name);
},
error: function(){
alert('fail');
}
});
}
</script>
<input type="button" value="提交" onclick="SendData();"/>

点击提交按钮后,发现服务器端的Request.QueryString["callback"]返回一个随机函数名。这样就被设置成JSONP格式来传递数据了

2.自定义函数名

可以在传递过程中自定义函数名,只要使用jsonpCallback参数就可以了。

jsonp:表示传递的参数,默认为callback,我们也可以自定义,服务器段通过此参数,获取自定义的函数名称,服务器这样获取 Request.QueryString["callback"]

jsonpCallback表示传递的参数值,也就是回调的函数名称,这是自定义的名称。
复制代码 代码如下:

<script type="text/javascript">
functionSendData() {
$.ajax({
type: "get",
async: false,
url: "/home/ReturnJson",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback: "receive",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(data) {
alert(data.name);
},
error: function() {
alert('fail');
}
});
}

functionreceive(data) {
alert(data.age);
}
</script>

相关文章

  • IE6下opacity与JQuery的奇妙结合

    IE6下opacity与JQuery的奇妙结合

    在群里看见有人贴出一个页面问opacity不支持IE6,有什么好的支持方法没。贴出第一眼就发现用了jq库,当场就想到了支持的。 但很多人回答用CSS滤镜,当我看到这个答案的时候。有些很吃惊。难道大家都不知道JQ是支持opacity兼容IE6+的吗? 开始他们都不相信。JQ怎么配合使用。于是就写了一个简单的代码给他们。
    2013-03-03
  • JQuery 表单中textarea字数限制实现代码

    JQuery 表单中textarea字数限制实现代码

    textarea中的字数的限制是在1000个之内,下面是具体的实现代码,基本上会点jquery的能看懂,不懂的可以学习下jquery,当期比较流行了,要不就落伍了。
    2009-12-12
  • jquery增加时编辑jqGrid(实例代码)

    jquery增加时编辑jqGrid(实例代码)

    jquery增加时编辑jqGrid(实例代码)。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 基于编写jQuery的无缝滚动插件

    基于编写jQuery的无缝滚动插件

    这篇文章主要介绍了基于编写jQuery的无缝滚动插件实现代码,需要的朋友可以参考下
    2014-08-08
  • jquery 图片 上一张 下一张 链接效果(续篇)

    jquery 图片 上一张 下一张 链接效果(续篇)

    很久没写文章了,这段时间一直在做类似鲜果的一个应用和数据采集,还有就是对企业和个人成长的思考。
    2010-04-04
  • jQuery.parseHTML() 函数详解

    jQuery.parseHTML() 函数详解

    这篇文章主要介绍了jQuery.parseHTML() 函数,用于将HTML字符串解析为对应的DOM节点数组,需要的朋友可以参考下
    2017-01-01
  • jQuery插件Timelinr 实现时间轴特效

    jQuery插件Timelinr 实现时间轴特效

    时间轴是依据时间顺序,把一方面或多方面的事件串联起来,形成相对完整的记录体系,再运用图文的形式呈现给用户,本文给大家收集了互联网上的效果比较不错的一款,分享给大家
    2015-10-10
  • jQuery实现form表单元素序列化为json对象的方法

    jQuery实现form表单元素序列化为json对象的方法

    这篇文章主要介绍了jQuery实现form表单元素序列化为json对象的方法,涉及jQuery基于serializeArray方法实现表单序列化的相关技巧,需要的朋友可以参考下
    2015-12-12
  • 浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法

    浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法

    有时候我们需要用resize事件调整浏览器窗口大小,但对框架却不起作用,这里介绍下实现方法,需要的朋友可以参考下
    2014-05-05
  • jQuery 3 中的新增功能汇总介绍

    jQuery 3 中的新增功能汇总介绍

    本文带你了解了一遍 jQuery 3 将会带来的一些重大变化。或许你已经注意到了,这个版本是可能对你现有的项目产生太大的影响,因为没有引入太多许多重大更改。
    2016-06-06

最新评论