Как использовать тип: «POST» в вызове jsonp ajax - PullRequest
52 голосов
/ 22 декабря 2010

Я использую JQuery AJAX JSONP. Я получил ниже 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();  
         } 

    });  

Приведенный выше код работает нормально, я просто хочу отправить запрос как "POST" вместо "GET" . Пожалуйста, подскажите, как мне этого добиться.

Спасибо

Ответы [ 6 ]

81 голосов
/ 22 декабря 2010

Вы не можете POST использовать JSONP ... он просто не работает таким образом, он создает элемент <script> для извлечения данных ... который имеет для запроса GET.Вы не можете ничего сделать, кроме публикации на своем собственном домене в качестве прокси-сервера, который отправляет сообщения другому ... но пользователь не сможет сделать это напрямую и, тем не менее, увидит ответ.

36 голосов
/ 18 июля 2013

Используйте json в dataType и отправьте так:

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

и поместите эти строки в файл на стороне сервера:

если PHP:

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

если java:

response.addHeader( "Access-Control-Allow-Origin", "*" ); 
response.addHeader( "Access-Control-Allow-Methods", "POST" ); 
response.addHeader( "Access-Control-Max-Age", "1000" );
7 голосов
/ 24 декабря 2010

Современные браузеры допускают междоменные запросы AJAX, это называется Распределение ресурсов между источниками (см. Также этот документ для более краткого и практического введения) и последние версии jQuery поддерживать его из коробки; Вам нужна относительно недавняя версия браузера (FF3.5 +, IE8 +, Safari 4+, Chrome4 +; нет поддержки Opera AFAIK).

2 голосов
/ 07 мая 2013
0 голосов
/ 15 января 2017

Вот JSONP, который я написал, чтобы поделиться со всеми:

страница для отправки запроса
http://c64.tw/r20/eqDiv/fr64.html

пожалуйста, сохраните код ниже, чтобы самим .html
c64.tw/r20/eqDiv/src/fr64.txt
Пожалуйста, сохраните страницу ниже, чтобы самим .jsp
c64.tw/r20/eqDiv/src/doFr64.txt

или встроенный код на вашей странице:

функция callbackForJsonp (соответственно) {

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

}

}

$ (документ) .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);

        }

    });

});

});

0 голосов
/ 20 апреля 2015

Если вы просто хотите создать форму POST для своего собственного сайта, используя $.ajax() (например, для эмуляции опыта AJAX), то вы можете использовать jQuery Form Plugin .Однако, если вам нужно выполнить POST-форму в другом домене или в вашем собственном домене, но с использованием другого протокола (небезопасная http: страница, отправляющаяся на защищенную https: страницу), вы натолкнетесь наограничения междоменных сценариев, которые вы не сможете устранить только с помощью jQuery ( больше информации ).В таких случаях вам нужно вывести большие пушки: YQL .Проще говоря, YQL - это язык веб-скрепинга с SQL-подобным синтаксисом, который позволяет запрашивать весь интернет как одну большую таблицу.На мой взгляд, YQL - это единственный [простой] способ, если вы хотите выполнять POST-обработку междоменных форм с использованием клиентского JavaScript.

В частности, вам нужно использовать Открытая таблица данных YQL , содержащая Выполнить блок , чтобы это произошло.Подробное описание того, как это сделать, вы можете прочитать в статье « Очистка документов HTML, для которых требуются данные POST с YQL ».К счастью для нас, гуру YQL Кристиан Хейлманн уже создал открытую таблицу данных, которая обрабатывает данные POST .Вы можете поиграть с таблицей Кристиана "htmlpost" в YQL Console .Вот разбивка синтаксиса YQL:

  • select * - выбрать все столбцы, аналогичные SQL, но в этом случае столбцы - это элементы XML или объекты JSON, возвращаемые запросом.В контексте очистки веб-страниц эти «столбцы» обычно соответствуют элементам HTML, поэтому, если вы хотите получить только заголовок страницы, вы должны использовать select head.title.
  • from htmlpost - какую таблицу запрашивать;в этом случае используйте таблицу открытых данных htmlpost (вы можете использовать собственную таблицу, если она не соответствует вашим потребностям).
  • url="..." - action URI формы.
  • postdata="..." - данные сериализованной формы.
  • xpath="..." - XPath узлов, которые вы хотите включить в ответ.Это действует как механизм фильтрации, поэтому, если вы хотите включить только теги <p>, вы должны использовать xpath="//p";чтобы включить все, что вы использовали бы xpath="//*".

Нажмите «Тест», чтобы выполнить запрос YQL.Если вы довольны результатами, обязательно (1) щелкните «JSON», чтобы установить формат ответа JSON, и (2) снимите флажок «Диагностика», чтобы минимизировать размер полезной нагрузки JSON, удаляя постороннюю диагностическую информацию.Самый важный бит - это URL внизу страницы - это URL, который вы бы использовали в выражении $.ajax().

Здесь я собираюсь показать вам точные шаги для выполнениямеждоменная форма POST через запрос YQL с использованием этого примера формы:

<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>

Ваш JavaScript будет выглядеть следующим образом:

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

Строка url представляет собой URL-адрес запроса, скопированный изконсоль YQL, за исключением динамически вставляемых кодированных action URI формы и сериализованных входных данных.

ПРИМЕЧАНИЕ: При передаче конфиденциальной информации через Интернет следует учитывать последствия для безопасности.Убедитесь, что страница, с которой вы отправляете конфиденциальную информацию, является безопасной (https:) и с использованием TLS 1.x вместо SSL 3.0 .

...