Comment JSONP avec jQuery et PHP peut-il résoudre les problèmes de requêtes multi-origines ?

Requêtes d'origine croisée avec JSONP : un exemple simple de jQuery et PHP

Dans cet exemple, nous aborderons le défi du cross- requêtes d'origine utilisant JSONP, une technique élégante qui permet la communication entre JavaScript et des serveurs Web de différents domaines.

Imaginons que vous souhaitiez pour envoyer une requête cross-origin depuis un client jQuery vers un serveur PHP et récupérer une réponse personnalisée. Pour y parvenir, nous utiliserons la méthode $.getJSON de jQuery pour lancer une requête JSONP.

Script jQuery :

$.getJSON('http://example.com/jsonp.php?callback=?', 'firstname=Jeff', function(response) {
  alert('Your name is ' + response.fullname);
});

Serveur PHP Script :

<?php
$firstname = $_GET['firstname'];
if ($firstname == 'Jeff') {
  header('Content-Type: application/json');
  echo $_GET['callback'] . '(' . json_encode(['fullname' => 'Jeff Hansen']) . ')';
}
?>

Explication :

Lorsque vous appelez $.getJSON avec une URL contenant '?callback=?', jQuery gère automatiquement le JSONP demande. Le script PHP côté serveur répond avec un objet JSON enveloppé dans un appel de fonction qui correspond au rappel fourni par jQuery. Dans ce cas, le rappel est passé comme premier paramètre dans la requête GET.

Gestion des réponses HTML :

Si vous souhaitez renvoyer du HTML dans la réponse , vous pouvez utiliser une fonction à la place d'un objet JSON au sein du script PHP :

<?php
$firstname = $_GET['firstname'];
if ($firstname == 'Jeff') {
  header('Content-Type: text/html');
  echo '<h1>Welcome, Jeff Hansen!</h1>';
}
?>

Et côté jQuery, vous pouvez gérer la réponse comme tel :

$.getJSON('http://example.com/jsonp.php?callback=?', 'firstname=Jeff', function(response) {
  $('#container').html(response);
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!