2012-07-12 24 views
12

Estoy intentando usar JSON para iniciar una solicitud POST a una API.Usando JSON POST Request

he encontrado un código de ejemplo, y antes de que llegue demasiado lejos quería conseguir que el trabajo, pero estoy atascado ...

<html> 
<head> 
<script type="text/javascript"> 
function JSONTest() 
{ 
requestNumber = JSONRequest.post(
    "https://example.com/api/", 
    { 
     apikey: "23462", 
     method: "example", 
     ip: "208.74.35.5" 
    }, 
    function (requestNumber, value, exception) { 
     if (value) { 
      processResponse(value); 
     } else { 
      processError(exception); 
     } 
    } 
); 
} 
</script> 
</head> 
<body> 

<h1>My JSON Web Page</h1> 


<button type="button" onclick="JSONTest()">JSON</button> 

</body> 
</html> 

Este es un archivo .html, que soy corriendo en cromo. No ocurre nada cuando hago clic en el botón ...

Creo que me falta un trozo de javascript que interpreta la respuesta JSON y se puede mostrar? de lo contrario algún otro consejo?

+0

estaba bajo la impresión de JSON era un subconjunto de Javascript ...? y entonces Javascript podría ejecutarlo sin ningún problema? – GK1667

+0

JSON es un formato de intercambio de datos. Los navegadores modernos pueden entender esto, pero los navegadores más antiguos necesitan una biblioteca para poder transformar cadenas JSON en objetos JavaScript. Recomiendo usar una biblioteca como jQuery para ayudarlo con esto, ya que esto también resolverá algunos de los problemas de compatibilidad del navegador para clientes más antiguos. – Phil

+0

La mayoría de los navegadores modernos tienen un objeto JSON disponible, pero JSONRequest no es un objeto o función nativamente disponible en la ventana o en los objetos del documento. – kinakuta

Respuesta

27

A continuación se incluye un ejemplo con jQuery. Espero que esto ayude

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<title>My jQuery JSON Web Page</title> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 

JSONTest = function() { 

    var resultDiv = $("#resultDivContainer"); 

    $.ajax({ 
     url: "https://example.com/api/", 
     type: "POST", 
     data: { apiKey: "23462", method: "example", ip: "208.74.35.5" }, 
     dataType: "json", 
     success: function (result) { 
      switch (result) { 
       case true: 
        processResponse(result); 
        break; 
       default: 
        resultDiv.html(result); 
      } 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
     alert(xhr.status); 
     alert(thrownError); 
     } 
    }); 
}; 

</script> 
</head> 
<body> 

<h1>My jQuery JSON Web Page</h1> 

<div id="resultDivContainer"></div> 

<button type="button" onclick="JSONTest()">JSON</button> 

</body> 
</html> 

proceso de depuración Firebug

Firebug XHR debug process

+1

¡Este es un gran ejemplo! Mi problema es que se envía a la parte de "error de solicitud". Reemplacé todo con los datos no válidos pero aún no funciona. Me he puesto en contacto con esta API con éxito y obtuve una respuesta mediante el uso de la función de curl de PHP y que el usuario ingrese apikey, method e ip en una página html que se publica en el php. ¿Alguna otra idea de cómo podría lograr esto y obtener una respuesta usando javascript? – GK1667

+0

Hola. He actualizado mi respuesta anterior, simplemente cambié el controlador de errores, que debería proporcionarle más información sobre el error. Normalmente, si se llama a ese controlador de errores, generalmente se trata de algún tipo de error de transporte/cors, como mencionó Jason. Intenta actualizar el código y ver cuál es el nuevo error. Recomiendo encarecidamente instalar Fiddler o utilizar Google Chrome F12 Debug para que pueda ver "exactamente" lo que está sucediendo "debajo del capó". Siéntete libre de contactarme :) – Phil

+0

Muchas gracias. Realmente aprecio que te quedes conmigo en esto. He estado trabajando en esto durante varios días y ¡ni siquiera puedo conectarme! De todos modos, probé la adición al código. Solo devuelve "0". Tengo Firebug funcionando, soy nuevo en su uso, así que si tienes alguna pregunta sobre qué pieza quieres que examine, ¡con mucho gusto lo haré! – GK1667

0

Los navegadores modernos actualmente no implementan JSONRequest (hasta donde yo sé) ya que es solo un borrador en este momento. He encontrado a alguien que lo ha implementado como una biblioteca que puede incluir en su página: http://devpro.it/JSON/files/JSONRequest-js.html (tenga en cuenta que tiene algunas dependencias).

De lo contrario, es posible que desee ir con otra biblioteca JS como jQuery o Mootools.