js跨域ajax的方法
阿新 • • 發佈:2019-02-19
最近想寫一個在網頁上自動做題的小工程,不知道如何把資料庫和網頁連線起來,最初想的方法是用websql把題庫存到瀏覽器,然後做題時候用js邊匹配邊選擇答案,但是題庫有點大,當點了那個做題的網頁後,websql的內容會消失,我很頭疼,後來學了ajax,我就想用ajax在控制檯裡傳出來問題,然後後臺匹配答案並返回答案,發現了一個問題,ajax普通只能在一個域傳輸資訊,跨域就不行了,後來看了好多方法,最後用jsonp的方法解決跨域問題,在這裡寫出jsonp的小demo:
$.ajax({
type: "get",
url:"http://localhost/ajax.php" ,
data:{name:'data'},
dataType: 'jsonp',
async: false,
success: function(data){
//
}
});
function callback(data) {
//在這裡的data是返回來的json資料,用來接收
alert(data.con);
}
ajax.php
<?php
$callback = $_GET["callback"];
$recei = $_GET["name"];
$a = array(
'con'=> $recei,
);
$result = json_encode($a);
echo "callback($result)";
exit;
在這裡執行方式是把php放在apache的目錄下,用lamp或者wamp環境,上面的jquery程式可以在chrome控制檯執行,注意要引入jquery的庫。另外,jsonp要有回撥函式,即callback函式,預設是這個,如果要定義別的,需”jsonpCallback :’func_name’”。這個demo返回的結果是’data’;
var jq = document.createElement('script' );
jq.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();