Bagaimanakah JSONP Boleh Menyelesaikan Masalah AJAX Cross-Domain jQuery?

JQuery AJAX Cross-Domain Dilemma: Melangkaui CORS dengan JSONP

Berinteraksi dengan data merentas domain yang berbeza menimbulkan cabaran disebabkan Perkongsian Sumber Silang Asal (CORS) sekatan. Apabila cuba melaksanakan permintaan AJAX dari satu domain ke domain lain, seperti test.php pada localhost dan testserver.php pada pelayan jauh, penyemak imbas menguatkuasakan sekatan ini, yang membawa kepada makluman "Ralat".

Untuk mengatasi ini halangan, JSONP (JSON dengan Padding) muncul sebagai penyelesaian yang berdaya maju. Ia memanfaatkan fleksibiliti elemen skrip untuk mendapatkan semula data merentas domain.

Pengubahsuaian jQuery:
Ubah suai test.php untuk menggunakan JSONP dengan menukar parameter dataType kepada 'jsonp'.

Pengubahsuaian PHP:
Laraskan testserver.php untuk menggemakan respons JSONP dengan panggilan balik yang disediakan oleh jQuery.

Pelaksanaan:

jQuery (test.php):

$.ajax({
    url: "testserver.php",
    dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
    success: function(json){
        // do stuff with json (in this case an array)
        alert("Success");
    },
    error: function(){
        alert("Error");
    }       
});

PHP (testserver.php):

<?php
$arr = array("element1", "element2", array("element31", "element32"));
$arr['name'] = "response";
echo $_GET['callback'] . "(" . json_encode($arr) . ");";
?>

Kaedah Ringkas Menggunakan $.getJSON():
Sebagai alternatif, gunakan kaedah trengkas $.getJSON(), yang secara automatik menambah 'panggilan balik=?' ke URL sebagai parameter GET.

$.getJSON("testserver.php", function(json){
    // do stuff with json (in this case an array)
    alert("Success");
});

Atas ialah kandungan terperinci Bagaimanakah JSONP Boleh Menyelesaikan Masalah AJAX Cross-Domain jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!