先看一個執行個體
| 代碼如下 |
複製代碼 |
$("#btn").click(function(k) { //... var j = form.serializeArray();//序列化name/value $.ajax({ url: "另一個網域名稱/test.php", dataType: 'jsonp', data: j, jsonp: 'jsonp_callback', success: function(json) { //返回的json資料 json = json || {}; if (json.msg=='err'){ alert(json.info); }else if (json.msg=="ok"){ alert('提交成功'); }else{ alert('提交失敗'); } }, timeout: 3000 }) //... });
|
php部分:
| 代碼如下 |
複製代碼 |
$jsonp_callback=$_GET['jsonp_callback']; //... //如果正確 echo $jsonp_callback,'({"msg":"ok"})'; 5.//如果錯誤 echo $jsonp_callback,'({"msg":"err","info":"因人品問題,發送失敗"})';
|
//...值得注意的是採用jsonp 方式,beforeSend / error 都不能用了,所以beforeSend裡面用js實現的驗證只能用ajax在伺服器端test.php上面驗證了。
網域名稱下面有這麼個html檔案testjsonp.html:
代碼如下:
| 代碼如下 |
複製代碼 |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns=“http://www.w3.org/1999/xhtml“ > <head> <title>Untitled Page</title> <script type=“text/javascript“ src=“jquery-1.7.2.min.js“></script> <script type=“text/javascript“> jQuery(document).ready(function(){ $.ajax({ type: “GET“, async: false, //url: “http://test/jsonp.php“, url:“http://mytaobao.com/jsonp.php“, dataType: “jsonp“, jsonp: “callback“,//傳遞給請求處理常式或頁面的,用以獲得jsonp回呼函數名的參數名(一般預設為:callback) jsonpCallback:“flightHandler“,//自訂的jsonp回呼函數名稱,預設為jQuery自動產生的隨機函數名,也可以寫“?“,jQuery會自動為你處理資料 success: function(json){ alert('您查詢到航班資訊:票價: ' + json.price + ' 元,餘票: ' + json.tickets + ' 張。回呼函數名為: '+json.func); }, error: function(){ alert(“fail“); } }); }); </script> </head> <body> </body> </html> |
注意,要真正運行上面的代碼可能需要jquery的檔案,你可以將
| 代碼如下 |
複製代碼 |
| <script type=“text/javascript“ src=“jquery-1.7.2.min.js“></script> |
改為你目錄中jquery的檔案路徑:
如:
| 代碼如下 |
複製代碼 |
<script type=“text/javascript“ src=“js/jquery.js“></script>
|
然後,你可以再找個另外一個網域名稱的web目錄,將檔案jsonp.php:
代碼如下:
| 代碼如下 |
複製代碼 |
<?php $callback = $_GET[“callback“]; $a = array( 'code'=>'CA1998', 'price'=>'6000', 'tickets'=>20, 'func'=>$callback, ); $result = json_encode($a); echo “flightHandler($result)“; exit; |
放到這個目錄下面去。這樣就可以測試了。
直接在瀏覽器訪問testjsonp.html.就可以看到效果了