最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

jquery下利用jsonp跨域访问实现方法

来源:http://www.erdangjiade.com/ 二当家的 2015-04-08 21:34浏览(1523)

本文将给您介绍如何使用getJSON来实现异步跨域提交表单。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jquery下利用jsonp跨域访问实现方法
分类:其它特效 > Ajax 难易:中级
查看演示 下载资源: 118

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

HTML

在本例中我们跨域http://www.erdangjiade.com/jquery/demo/43/jsonp.php?callback=。你也可以试试其他域名。下面表单中,我们提交后的结果反馈到#rs中。

<form id="form" action="#" method="post"> 
   <ul> 
    <li><label>标题:</label><input type="text" class="input_text" name="title" /></li> 
    <li><label>内容:</label><input type="text" class="input_text" name="content" /></li> 
    <li><input type="submit" class="btn" value="提 交" /></li> 
   </ul> 
</form> 
<div id="rs" style="display:none"></div>

jQuery

通过getJSON我们进行跨越请求:

$(function() {
    $("#form").submit(function() {
        var data = $(this).serialize(); //表单数据系列化
        $.getJSON("http://www.erdangjiade.com/jquery/demo/43/jsonp.php?callback=?", data,
        function(json) {
            var message = '';
            if (json) {
                message = "<strong>返回信息:</strong><p>标题:" + json.title + "</p>内容:" + json.content + ""
            } else {
                message = "请注意返回json格式!";
            }
            $("#rs").html(message).show();
        });
        return false;
    });
});

PHP

我们看下jsonp.php的程序代码:

$result['title'] = $_GET['title']; 
$result['content'] = $_GET['content'];  
echo $_GET['callback'].'('.json_encode($result).')';

Jsonp原理:

  • 首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。 此时,服务器先生成 json 数据。
  • 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .
  • 最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
  • 客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数, 传入到了客户端预先定义好的 callback 函数。

声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/43.html
评论1
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 沙发
    09-13 09:41
    一只小肥牛
    酷酷!!!!!!!!!!
1 2