ajax 跨域解決問(wèn)題

字號(hào):


    ajax跨域問(wèn)題,這里使用 jsonp 來(lái)完成,該方式有一個(gè)弊端,在提交POST請(qǐng)求的時(shí)候,它依然會(huì)使用GET的方式傳遞參數(shù),這點(diǎn)目前還沒(méi)有解決。
    首先 得了解JSONP這種類型返回的值的格式,(callback(數(shù)據(jù))) 這里并不像普通的HTTP請(qǐng)求那樣,只要服務(wù)端返回?cái)?shù)據(jù)就可以直接將該數(shù)據(jù)拿來(lái)使用,它的區(qū)別在于 JSONP 會(huì)將數(shù)據(jù)放到一個(gè)回調(diào)方法里面。
    其次 我們來(lái)完成服務(wù)端的數(shù)據(jù)處理
    //這里使用PHP語(yǔ)言來(lái)處理服務(wù)端的數(shù)據(jù)
    /**
    * 獲取數(shù)據(jù)
    * 2014-12-25
    * comfiger
    **/
    public function getData(){
    $jsonCallback = $_GET['jsonCallback']; //回去在客戶端JS中定義的回調(diào)處理方法名稱
    $array = array(
    'name' => 'comfiger',
    'age' => '25',
    'sex' => '男',
    'job' => '服務(wù)端軟件開(kāi)發(fā)'
    );
    //將數(shù)據(jù)封裝城 JSON 格式
    $json = json_encode($array);
    //將JSON數(shù)據(jù)輸出到 $jsonCallback 方法中
    echo "$jsonCallback($json)";
    }
    最后 在客服端訪問(wèn)服務(wù)端數(shù)據(jù)
    //使用ajax方式調(diào)用
    $.ajax({
    url: 'http://192.168.0.105/getData?jsonCallback=?',
    dataType: 'jsonp',
    jsonp: 'callback', //jsonp回調(diào)處理函數(shù),默認(rèn)為: callback
    type: 'get',
    success: function(data){
    //console.log('jsonpData: ' + JSON.stringify(data));
    //這里獲取到的值為: callback({name: 'comfiger', age: '25', ....});
    //這樣看返回值就清楚的明白調(diào)用成功后,它會(huì)繼續(xù)調(diào)用 callback方法
    }
    });
    //定義回調(diào)callback方法處理
    var callback = function(data){
    console.log('callbackData: ' + JSON.stringify(data));
    //do something...
    }