JQuery - отправить сообщение синхронно (не AJAX) - PullRequest
Новая
       6

JQuery - отправить сообщение синхронно (не AJAX)

16 голосов
/ 02 октября 2010

У меня есть страница (page 1), которая принимает почтовые запросы, выполняет некоторые действия и отображает некоторые данные в конце.

С другой страницы (page 2) я хочу перенаправить на page 1 при нажатии кнопки, разумеется, отправляя все соответствующие данные, необходимые для page 1, через POST.

Я, конечно, могу использовать старый хак: невидимая форма на странице, вставка всех необходимых мне данных с помощью jquery, сразу после того, как пользователь нажал кнопку, и автоматическая отправка (). Но это выглядит громоздко - гораздо приятнее использовать синтаксис, подобный $.post, чем начинать манипулировать html. $.post было бы идеально, если бы он действительно перенаправлял на страницу и не делал запрос асинхронно (я не могу просто перенаправить на page 1 после того, как сообщение ajaxy завершено, поскольку page 1 нужны данные для отображения чего-либо).

Есть ли какой-нибудь способ сделать то, что я хочу, с помощью jquery, или уродливые невидимые формы - единственный выход?

P.S

Я знаю, что есть и другие запутанные способы достижения того, чего я хочу, например, используя $.post и просто добавив html ответа на страницу, на которой мы сейчас находимся, но я просто хочу знать, есть ли прямо способ сделать это с помощью jquery

Ответы [ 5 ]

15 голосов
/ 02 октября 2010

Это дало мне представление о небольшой функции jQuery для имитации поведения $ .post, как вы описали.Он по-прежнему использует невидимые формы в фоновом режиме, но синтаксис для него относительно чистый и простой. 

$(document).ready(function(){
    $('#myButton').PostIt('post.php', {foo:'bar', abc:'def', life:42});
    $('#myOtherButton').PostIt('post.php', dataObjectFromSomewhereElse);
});

$.fn.PostIt = function(url, data){

  $(this).click(function(event){

        event.preventDefault();

        $('body').append($('<form/>', {
          id: 'jQueryPostItForm',
          method: 'POST',
          action: url
        }));

        for(var i in data){
          $('#jQueryPostItForm').append($('<input/>', {
            type: 'hidden',
            name: i,
            value: data[i]
          }));
        }

        $('#jQueryPostItForm').submit();
    });
}
9 голосов
/ 09 июля 2011

Я адаптировал код Грега W к прямой функции, которую вы можете вызвать в своем коде: 

function postIt(url, data){

    $('body').append($('<form/>', {
      id: 'jQueryPostItForm',
      method: 'POST',
      action: url
    }));

    for(var i in data){
      $('#jQueryPostItForm').append($('<input/>', {
        type: 'hidden',
        name: i,
        value: data[i]
      }));
    }

    $('#jQueryPostItForm').submit();
}
0 голосов
/ 16 ноября 2010

Полагаю, ответ: прямого пути нет. Для общей функции, которая добавляет эту возможность, см. Ответ Грега В.

0 голосов
/ 02 октября 2010

html: 

<form id="myform" method="get" acction="page2">
   <!-- data -->
</form>

js: 

$('#myform').bind('submit', function(ev) {

  ev.stopPropagation();

  var ok = true;
  //manipulate html and 'ok'

  return ok;   // if ok == false, don't execute post


});
0 голосов
/ 02 октября 2010

Если вам нужно выполнить запрос POST, тогда невидимая форма - один из ваших лучших вариантов.

Если ваше приложение будет работать с запросом GET, я закодирую данные в строку запроса и сделаюa.

document.location.href =

Вы можете использовать jQuery.serialize для генерации строки запроса.

...