您的位置:首页 > Web前端 > JQuery

jquery jsonp跨域请求

2016-06-08 10:31 447 查看
<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:"></div>

<script>

       $(function() {

        $("#form").submit(function() {

        var data = $(this).serialize(); //表单数据系列化  把表单数据转换成&a=1&b=2形式

        alert(data)

        $.getJSON("http://www.artv.cn/artv/index/callback?callback=?", data, //把表单参数拼接到地址上,获得回调数据,

        function(json) {

            var message = '';

            if (json.status == 1) {

                message = "<strong>返回信息:</strong><p>标题:" + json.title + "</p>内容:" + json.content + "</p>内容:" + json.status + ""

            } else {

                message = "请注意返回json格式!";

            }

            $("#rs").html(message);

        });

        return false;

    });

});
</script>

服务端代码

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


jsonp跨域请求,返回的是一个javascript函数,客户端解析script标签,里面带上了我们的请求返回的数据,解析数据

首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。

此时,服务器先生成 json 数据。然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,传入到了客户端预先定义好的 callback 函数。

$('checkbox').eq(0).checked.each() //遍历选中的checkbox
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: