jsonp 前端和後端的結合
阿新 • • 發佈：2019-01-04
jsonp一個熟悉的名字，做為一個不牛逼的前端總是不斷的複製別人寫的跨域呼叫，今天終於理解了跨域ajax請求前端和後端的結合了。
本人理解上可能有誤，如有錯誤請忽略
首先稍微理解下jsonp，
jsonp我今天的理解就是瀏覽器跨域請求返回一個js函式字串，返回一個有效的可執行的js標籤。
上案例
html程式碼
showJson(data)函式 作為 jsonp回撥函式 必須存在 因為後臺返回的是一個有效的js函式呼叫字串 不存在將導致失敗<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>跨域呼叫</title> <script type="text/javascript" src="jquery.mini.js"></script> </head> <body> <input type="button" onclick="getTime()" value="跨域按鈕"> <script type="text/javascript"> function showJson(data){ //result= data; alert(data); } function getTime(){ var url = 'http://yichou.com:81/zhang.php?callback=showJson'; $.ajax({ url:url, dataType:"jsonp", success: function(msg){ alert(msg.err); }, error:function(){ alert('請求失敗'); } }); } </script> </body> </html>
var url = 'http://yichou.com:81/zhang.php?callback=showJson'; 此處跟其他的ajax呼叫一樣 是請求的url 注意 此處必須傳遞要一個引數 做為jsonp的回撥函式 就是定義的showJson函式
dataType:"jsonp" 定義為jsonp
其他的引數就不做解釋了
php
$data = json_encode(array('err'=>'跨域呼叫','code'=>'你錯了')); echo $_GET['callback'].'('.$data.')';
此處就可以看到傳遞的callback的用處
後臺返回的就是回撥函式即
showJson('{"err":"\u8de8\u57df\u8c03\u7528","code":"\u4f60\u9519\u4e86"}')
返回的是一個有效的可執行的js函式呼叫的字串
請求成功 $data 就作為返回的結果可在success中使用
注意事項：
必須要有回撥函式，回撥函式必須跟後臺程式返回函式名稱一致 本人理解有限 希望大家多多指導