網頁

2013年11月2日 星期六

Ajax跨網域議題 - 透過POST方法送出資料

對於跨網域議題有所不懂或是想知道如何用GET方式處理,可以參考Ajax跨網域議題 - 使用JSONP取得資料
當我們在運用各種服務提供的RESTFUL API 時,資料傳遞的方式就相當重要
JSONP的處理只能透過GET的方式傳遞
扣除在Cross Domain所不允許的DELETE、AUTH兩種傳遞方式外
實際上我們還是可以用寄送表單的方式送出POST請求,只要透過一點想法的變換就可以
GitHub檔案目錄

解決這個問題的方式就是在頁面上建立IFrame,並將資料用POST的方式傳遞到該IFrame就可以了
下面函式中建立表單資訊的方式純粹是依我的需求來寫,這部分請隨意

function crossDomainPost(url, postData) {
    var iframe = document.createElement("iframe");
    document.body.appendChild(iframe);
    iframe.style.display = "none";
    iframe.contentWindow.name = "postIframe";

    // construct a form with hidden inputs, targeting the iframe
    var form = document.createElement("form");
    form.target = "postIframe";
    form.action = url;
    form.method = "POST";

    // repeat for each parameter
    var data = postData.split('&');
    for (var i = 0; i < data.length; i++) {
        var input = document.createElement("input");
        var _d = data[i];
        input.type = "hidden";
        input.name = _d.slice(0, _d.indexOf('='));
        input.value = _d.slice(_d.indexOf('=') + 1);
        form.appendChild(input);
    }

    document.body.appendChild(form);
    form.submit();

    //remove after post
    document.body.removeChild(form);
    iframe.onload = function () {
        document.body.removeChild(iframe);
    };
}

沒有留言:

張貼留言