formulario - Ejemplo simple de jQuery, PHP y JSONP?

jquery ajax json example

Question

Estoy enfrentando el mismo problema de política de origen, y al investigar el tema, descubrí que la mejor manera para mi proyecto en particular sería usar JSONP para hacer solicitudes de origen cruzado.

He estado leyendo este artículo de IBM sobre JSONP , sin embargo, no estoy 100% claro sobre lo que está sucediendo.

Todo lo que pido aquí, es una simple solicitud jQuery> PHP JSONP (o cualquiera que sea la terminología;)) - algo como esto (obviamente es incorrecto, es solo para que pueda hacerse una idea de lo que estoy tratando de lograr :)) :

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'';
  }
?>

¿Cómo podría convertir esto en una solicitud JSONP adecuada? Y si fuera a almacenar HTML en el resultado que se devolverá, ¿eso también funcionaría?

Answer 1

Antes que nada, no puedes hacer una solicitud POST usando JSONP.

Lo que básicamente está sucediendo es que dinámicamente se inserta una etiqueta de script para cargar sus datos. Por lo tanto, solo son posibles las solicitudes GET.

Además, sus datos deben estar envueltos en una función de devolución de llamada que se llama después de que la solicitud finalice para cargar los datos en una variable.

Todo este proceso está automatizado por jQuery para usted. Sin embargo, el uso de $ .getJSON en un dominio externo no siempre funciona. Puedo decir por experiencia personal.

Lo mejor que puedes hacer es agregar y devolver una llamada =? para ti url.

En el lado del servidor, debes asegurarte de que tus datos estén envueltos en esta función de devolución de llamada.

es decir.

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

EDITAR:

Todavía no tengo suficiente representante para comentar la respuesta de Liam, por lo tanto, la solución aquí.

Reemplazar la línea de Liam

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

con

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

Answer 2

Cuando usas $ .getJSON en un dominio externo, automáticamente ejecuta una solicitud de JSONP, por ejemplo, mi barra deslizadora de Twitter aquí.

Si miras el código fuente, puedes ver que estoy llamando a la API de Twitter usando .getJSON.

Entonces su ejemplo sería: ESTE ES PROBADO Y FUNCIONA (Puede ir a http://smallcoders.com/javascriptdevenvironment.html para verlo en acción)

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

      }
?>

Tenga en cuenta la? Devolución de llamada =? y + res.fullname

Answer 3

Más sugerencias

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

}
?>

Answer 4

Para hacer que el servidor responda con una matriz JSONP válida, ajuste el JSON entre corchetes () y preprendre la callback :

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

El uso de json_encode() convertirá una matriz PHP nativa en JSON:

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

Answer 5

Utilizar esta ..

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

Ahora ..

use $data[''elemname''] para acceder a los valores.

envíe la solicitud jsonp con el objeto JSON.

Formato de solicitud:

$.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);
    }
}) 

Answer 6

$.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;

En el controlador:

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

Answer 7

window.onload = function(){
    $.ajax({
        cache: false,
        url: "demo1.php",
        data: {},
        dataType: ''jsonp'',
        type: ''GET'',
        success: function(data){
            console.log(''data'')
        },
        error: function(data){
            console.log(data);
        }
    });
};

if(!empty($_GET[''callback''])){
    echo $_GET[''callback''].''(''.json_encode(array("id"=>"123", "name"=>"JOSNP")).'')'';
}