Jquery 非同步跨域問題

YPHP發表於2017-05-18
jQuery非同步跨域

回車提交非同步請求

 $(function (){
    // 點選儲存評論
    $(".reComment").on("click", function (){
        saveCommentData($(this).prev());
    });

    // 獲取焦點情況下回車提交評論
    $(".reCommentInput").on("focus", function (){
        var _this = $(this);
        $(this).on(`keyup`, function (e) {
            e.stopPropagation();

            // 上下方向鍵
            if (e.keyCode == "38" || e.keyCode == "40"){
                console.log(`你在動方向鍵`);
            }

            // 回車
            if (e.keyCode == "13") {
                saveCommentData(_this);
            }
        });
    });
});

Ajax JSONP 跨域

/**
 * 儲存評論內容
 * @param  _this
 */
function saveCommentData(_this)
{
    var content     = _this.val();
    var id          = _this.attr("data-id");

    // JSONP 不支援post跨域請求
    $.ajax({
        type: `POST`,
        jsonp: `callback`,
        dataType: `jsonp`,
        data:{id:id, content:content},
        url: "http://baidu.com/index.php",
        success: function (data) {
            console.log(data.id);
        }
    });                                                                                                                                                               }

getJSON 跨域

/**
 * 儲存評論內容
 * @param  _this
 */
function saveCommentData(_this)
{
    var content     = _this.val();
    var id          = _this.attr("data-id");

    // getJson簡單跨域請求
    $.getJSON("http://baidu.com/index.php?callback=?", {id:id, content:content}, function (date) {
        console.log(date);
    });
}

php 原生伺服器端程式碼

public function saveReData(Request $request)
{
    $data = $_GET;
    return $_GET[`callback`].`(`.json_encode($data, JSON_UNESCAPED_UNICODE).`)`;
}

php Laravel框架務器端程式碼

public function saveReData(Request $request)
{
    $data = $request->all();
    return response()->jsonp(array_get($data, `callback`), [`id`=>`ssssssssssssss`]);
}

相關文章