web-dev-qa-db-fra.com

Simple jQuery, PHP et exemple JSONP?

Je suis confronté au problème de politique d'origine identique et, en effectuant des recherches sur le sujet, j'ai constaté que le meilleur moyen pour mon projet particulier consistait à utiliser JSONP pour effectuer des requêtes croisées.

J'ai lu cet article d'IBM à propos de JSONP , mais je ne suis pas parfaitement au courant de ce qui se passe.

Tout ce que je demande ici, c’est une simple requête jQuery> PHP JSONP (ou quelle que soit la terminologie employée;)) - quelque chose comme ceci (évidemment, il est incorrect, c'est juste pour que vous puissiez obtenir une idée de ce que je cherche à 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 convertir cette requête en une requête JSONP appropriée? Et si je stockais du HTML dans le résultat à renvoyer, cela fonctionnerait-il aussi?

phpjqueryajaxjsonjsonp
53
Jeff

Lorsque vous utilisez $ .getJSON sur un domaine externe, une action JSONP est automatiquement appliquée, par exemple my curseur Tweet ici

Si vous regardez le code source, vous verrez que j'appelle l'API Twitter en utilisant .getJSON.

Ainsi, votre exemple serait: THIS IS 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'}" . ')';

      }
?>

Notez le? Callback =? et + res.nom complet

89
Liam Bailey

Tout d’abord, vous ne pouvez pas faire de demande POST en utilisant JSONP.

Ce qui se passe essentiellement, c’est qu’une balise de script est insérée de manière dynamique pour charger vos données. Par conséquent, seules les requêtes GET sont possibles.

De plus, vos données doivent être encapsulées dans une fonction de rappel appelée une fois la demande terminée pour charger les données dans une variable.

Tout ce processus est automatisé par jQuery pour vous. L'utilisation de $ .getJSON sur un domaine externe ne fonctionne pas toujours. Je peux raconter par expérience personnelle.

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

Du côté du serveur, vous devez vous assurer que vos données sont encapsulées dans cette fonction de rappel.

c'est à dire.

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

MODIFIER:

N'ayant pas encore assez de représentants pour commenter la réponse de Liam, voici donc la solution.

Remplacer la ligne de Liam

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

avec

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

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).")";

}
?>
15
Meni Samet

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

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

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

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

Simple jQuery, PHP et l'exemple JSONP est ci-dessous:

window.onload = function(){
        $.ajax({
                cache: false,
                url: "https://jsonplaceholder.typicode.com/users/2",
                dataType: 'jsonp',
                type: 'GET',
                success: function(data){
                        console.log('data', data)
                },
                error: function(data){
                        console.log(data);
                }
        });
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
Mayur S

Utilisez ceci ..

    $str = rawurldecode($_SERVER['REQUEST_URI']);
    $arr = explode("{",$str);
    $arr1 = explode("}", $arr[1]);
    $jsS = '{'.$arr1[0].'}';
    $data = json_decode($jsS,true);

À présent ..

utilisation $data['elemname'] pour accéder aux valeurs.

envoyer une demande jsonp avec un objet JSON.

Format de la demande:

$.ajax({
    method : 'POST',
    url : 'xxx.com',
    data : JSONDataObj, //Use JSON.stringfy before sending data
    dataType: 'jsonp',
    contentType: 'application/json; charset=utf-8',
    success : function(response){
      console.log(response);
    }
})
0
Atul Sharma
$.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) . ');';  
}
0
user4000483