Ajax跨域解决实例

HTML

在本例中我们跨域http://www.sucaihuo.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.sucaihuo.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原理：

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