55 votes

Exemple simple avec jQuery, PHP et JSONP?

Je suis confronté au même-la politique de l'origine du problème, et en faisant des recherches sur le sujet, j'ai trouvé que la meilleure façon pour mon projet serait d'utiliser JSONP à faire de la croix-de l'origine des demandes.

J'ai lu cet article d'IBM sur JSONP, mais je ne suis pas 100% clair sur ce qui se passe.

Tout ce que je demande ici, c'est un simple jQuery>PHP JSONP demande (ou quelle que soit la terminologie peut être ;) ) - quelque chose comme cela (c'est évidemment incorrect, c'est juste pour vous faire une idée de ce que je suis en train de réaliser :) ):

jQuery:

$.post('http://MySite.com/MyHandler.php',{firstname:'Jeff'},function(res){
    alert('Your name is '+res);
});

PHP:

<?php
  $fname = $_POST['firstname'];
  if($fname=='Jeff')
  {
    echo 'Jeff Hansen';
  }
?>

Comment pourrais-je aller sur la conversion de ce dans une bonne JSONP demande? Et si je devais stocker le code HTML dans le résultat retourné, serait-ce trop de travail?

90voto

Liam Bailey Points 3441

Lorsque vous utilisez $.getJSON sur un domaine externe automatiquement les actions d'un JSONP demande, par exemple, mon tweet curseur ici

Si vous regardez le code source, vous pouvez voir que je suis l'appel de l'API Twitter à l'aide .getJSON.

Donc votre exemple serait: C'EST TESTÉ ET FONCTIONNE (Vous pouvez aller à http://smallcoders.com/javascriptdevenvironment.html pour le voir en action)

//JAVASCRIPT

$.getJSON('http://www.write-about-property.com/jsonp.php?callback=?','firstname=Jeff',function(res){
    alert('Your name is '+res.fullname);
});

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

      }
?>

Remarque l' ?rappel=? et +res.fullname

21voto

Ewout Kleinsmann Points 727

Tout d'abord, vous ne pouvez pas faire une requête POST à l'aide de JSONP.

Ce qui fondamentalement se passe c'est que dynamiquement une balise script est inséré pour charger vos données. Par conséquent OBTENEZ seulement les demandes sont possibles.

En outre, vos données doit être enveloppé dans une fonction de callback qui est appelée après que la demande est fini de charger les données dans une variable.

L'ensemble de ce processus est automatisé par jQuery pour vous. Juste à l'aide de $.getJSON sur un domaine externe ne fonctionne pas toujours bien. Je peux dire à partir de mon expérience personnelle.

La meilleure chose à faire est d'ajouter &callback=? pour vous url.

Sur le côté serveur que vous avez à faire assurez-vous que vos données sont enveloppés dans cette fonction de rappel.

c'est à dire.

echo $_GET['callback'] . '(' . $data . ')';

EDIT:

N'avez pas assez de rep pas encore de commentaire sur la réponse de Liam donc la solution ici.

Remplacer Liam ligne

 echo "{'fullname' : 'Jeff Hansen'}";

avec

 echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';

19voto

Meni Samet Points 13

Plus de suggestion

JavaScript:

 $.ajax({
        url: "http://FullUrl",
        dataType: 'jsonp',
        success: function (data) {

            //Data from the server in the in the variable "data"
            //In the form of an array

        }

});
 

PHP CallBack:

 <?php

$array = array(
     '0' => array('fullName' => 'Meni Samet', 'fullAdress' => 'New York, NY'),
     '1' => array('fullName' => 'Test 2', 'fullAdress' => 'Paris'),
);

if(isset ($_GET['callback']))
{
    header("Content-Type: application/json");

    echo $_GET['callback']."(".json_encode($array).")";

}
?>
 

8voto

mckoch Points 172

Pour que le serveur réponde avec un tableau JSONP valide, placez le code JSON entre crochets () et ajoutez le callback :

 echo $_GET['callback']."([{'fullname' : 'Jeff Hansen'}])";
 

Utiliser json_encode () convertira un tableau PHP natif en JSON:

 $array = array(
    'fullname' => 'Jeff Hansen',
    'address' => 'somewhere no.3'
);
echo $_GET['callback']."(".json_encode($array).")";
 

0voto

user4000483 Points 11
 $.ajax({

        type:     "GET",
        url: '<?php echo Base_url("user/your function");?>',
        data: {name: mail},
        dataType: "jsonp",
        jsonp: 'callback',
        jsonpCallback: 'chekEmailTaken',
        success: function(msg){
    }
});
return true;
 

Dans le contrôleur:

 public function ajax_checkjp(){
$checkType = $_GET['name'];
echo $_GET['callback']. '(' . json_encode($result) . ');';  
}
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X