jquery - domain - jsonp example

Cómo usar el tipo: "POST" en jsonp ajax call

Question

Estoy usando JQuery ajax jsonp. Tengo debajo el código de JQuery:

 $.ajax({  
        type:"GET",        
        url: "Login.aspx",  // Send the login info to this page
        data: str, 
        dataType: "jsonp", 
        timeout: 200000,
        jsonp:"skywardDetails",
        success: function(result)
        { 
             // Show ''Submit'' Button
            $(''#loginButton'').show();

            // Hide Gif Spinning Rotator
            $(''#ajaxloading'').hide();  
         } 

    });  

El código anterior está funcionando bien, solo deseo enviar la solicitud como "POST" en lugar de "GET" . Sugiera cómo puedo lograr esto.

Gracias

Answer 1

Aquí está el JSONP que escribí para compartir con todos:

la página para enviar req
http://c64.tw/r20/eqDiv/fr64.html

por favor guarde el srec a continuación en .html youself
c64.tw/r20/eqDiv/src/fr64.txt
la página a resp, guarde el srec a continuación en .jsp youself
c64.tw/r20/eqDiv/src/doFr64.txt

o incrustado el código en tu página:

función callbackForJsonp (resp) {

var elemDivResp = $("#idForDivResp");
elemDivResp.empty();

try {

    elemDivResp.html($("#idForF1").val() + " + " + $("#idForF2").val() + "<br/>");
    elemDivResp.append(" = " + resp.ans + "<br/>");
    elemDivResp.append(" = " + resp.ans2 + "<br/>");

} catch (e) {

    alert("callbackForJsonp=" + e);

}

}

$ (document) .ready (function () {

var testUrl = "http://c64.tw/r20/eqDiv/doFr64.jsp?callback=?";

$(document.body).prepend("post to " + testUrl + "<br/><br/>");

$("#idForBtnToGo").click(function() {

    $.ajax({

        url : testUrl,
        type : "POST",

        data : {
            f1 : $("#idForF1").val(),
            f2 : $("#idForF2").val(),
            op : "add"
        },

        dataType : "jsonp",
        crossDomain : true,
        //jsonpCallback : "callbackForJsonp",
        success : callbackForJsonp,

        //success : function(resp) {

        //console.log("Yes, you success");
        //callbackForJsonp(resp);

        //},

        error : function(XMLHttpRequest, status, err) {

            console.log(XMLHttpRequest.status + "/n" + err);
            //alert(XMLHttpRequest.status + "/n" + err);

        }

    });

});

});

Answer 2

JsonP solo funciona con el tipo: GET,

Más información (PHP) http://www.fbloggs.com/2010/07/09/how-to-access-cross-domain-data-with-ajax-using-jsonp-jquery-and-php/

.NET: http://www.west-wind.com/weblog/posts/2007/Jul/04/JSONP-for-crosssite-Callbacks

Answer 3

Los navegadores modernos permiten consultas AJAX entre dominios, se denomina Intercambio de recursos de origen cruzado (consulte también este documento para una introducción más breve y más práctica), y las versiones recientes de jQuery lo admiten de inmediato; sin embargo, necesita una versión de navegador relativamente reciente (FF3.5 +, IE8 +, Safari 4+, Chrome4 +, no Opera compatible con AFAIK).

Answer 4

No puede POST usar JSONP ... simplemente no funciona de esa manera, crea un elemento <script> para recuperar datos ... que tiene que ser una solicitud GET. No hay mucho que pueda hacer además de publicar en su propio dominio como un proxy que se envía a la otra ... pero el usuario no podrá hacerlo directamente y verá una respuesta.

Answer 5

Si solo quiere hacer un formulario POST en su propio sitio usando $.ajax() (por ejemplo, para emular una experiencia AJAX), entonces puede usar el complemento jQuery Form . Sin embargo, si necesita hacer un formulario POST a un dominio diferente, o a su propio dominio pero usando un protocolo diferente (un http: page no seguro que se publica en una https: página segura), entonces se encontrará con cross- restricciones de secuencias de comandos de dominio que no podrá resolver solo con jQuery ( más información ). En tales casos, tendrá que sacar las armas grandes: YQL . En pocas palabras, YQL es un lenguaje de raspado web con una sintaxis similar a SQL que le permite consultar toda la Internet como una gran tabla. Tal como están las cosas ahora, en mi humilde opinión, YQL es la única forma [fácil] de avanzar si quieres hacer una forma de dominio entre POSTing usando el JavaScript del lado del cliente.

Más específicamente, necesitará usar la tabla de datos abiertos de YQL que contiene un bloque de Execute para que esto suceda. Para obtener un buen resumen sobre cómo hacer esto, puede leer el artículo " Raspado de documentos HTML que requieren datos POST con YQL ". Afortunadamente para nosotros, el gurú de YQL Christian Heilmann ya ha creado una tabla de datos abiertos que maneja los datos POST . Puede jugar con la tabla "htmlpost" de Christian en la Consola YQL . Aquí hay un desglose de la sintaxis YQL:

• select * - seleccione todas las columnas, similar a SQL, pero en este caso las columnas son elementos XML o objetos JSON devueltos por la consulta. En el contexto de las páginas web raspadas, estas "columnas" generalmente corresponden a elementos HTML, por lo que si desea recuperar solo el título de la página, entonces debe usar select head.title .
• from htmlpost : qué tabla consultar; en este caso, use la tabla de datos abiertos "htmlpost" (puede usar su propia tabla personalizada si esta no se ajusta a sus necesidades).
• url="..." - el URI de action del formulario.
• postdata="..." - los datos del formulario serializado.
• xpath="..." : el XPath de los nodos que desea incluir en la respuesta. Esto actúa como mecanismo de filtrado, por lo que si solo quieres incluir etiquetas <p> entonces xpath="//p" ; para incluir todo lo que usaría xpath="//*" .

Haga clic en ''Probar'' para ejecutar la consulta YQL. Una vez que esté satisfecho con los resultados, asegúrese de (1) hacer clic en ''JSON'' para establecer el formato de respuesta en JSON y (2) desmarcar "Diagnósticos" para minimizar el tamaño de la carga JSON eliminando información de diagnóstico extraña. El bit más importante es la URL en la parte inferior de la página, esta es la URL que usaría en una declaración $.ajax() .

Aquí, le mostraré los pasos exactos para hacer una POST de forma multidominio a través de una consulta YQL utilizando este formulario de muestra:

<form id="form-post" action="https://www.example.com/add/member" method="post">
  <input type="text" name="firstname">
  <input type="text" name="lastname">
  <button type="button" onclick="doSubmit()">Add Member</button>
</form>

Tu JavaScript se vería así:

function doSubmit() {
  $.ajax({
    url: ''//query.yahooapis.com/v1/public/yql?q=select%20*%20from%20htmlpost%20where%0Aurl%3D%22'' +
         encodeURIComponent($(''#form-post'').attr(''action'')) + ''%22%20%0Aand%20postdata%3D%22'' +
         encodeURIComponent($(''#form-post'').serialize()) +
         ''%22%20and%20xpath%3D%22%2F%2F*%22&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback='',
    dataType: ''json'', /* Optional - jQuery autodetects this by default */
    success: function(response) {
      console.log(response);
    }
  });
}

La cadena url es la URL de consulta copiada de la consola YQL, excepto que el URI de action codificada del formulario y los datos de entrada serializados se insertan dinámicamente.

NOTA: tenga en cuenta las implicaciones de seguridad al pasar información confidencial a través de Internet. Asegúrese de que la página desde la que está enviando información confidencial sea segura ( https: y use TLS 1.x en lugar de SSL 3.0 .

Answer 6

Use json en dataType y envíe así:

    $.ajax({
        url: "your url which return json",
        type: "POST",
        crossDomain: true,
        data: data,
        dataType: "json",
        success:function(result){
            alert(JSON.stringify(result));
        },
        error:function(xhr,status,error){
            alert(status);
        }
    });

y coloque estas líneas en su archivo del lado del servidor:

si PHP:

header(''Access-Control-Allow-Origin: *'');
header(''Access-Control-Allow-Methods: POST'');
header(''Access-Control-Max-Age: 1000'');

si java:

response.addHeader( "Access-Control-Allow-Origin", "*" ); 
response.addHeader( "Access-Control-Allow-Methods", "POST" ); 
response.addHeader( "Access-Control-Max-Age", "1000" );