it-swarm.com.ru

Имитация отправки формы отправки с помощью вызова функции с JavaScript

С помощью jQuery мы можем симулировать отправку формы:

<form id="form1" method="post">
    <input name="key1" value="value1" />
    <input name="key2" value="value2" />
</form>

С помощью вызова функции AJAX:

$.post('', { key1: 'value1', key2: 'value2' }, function() {
   // do call back
});

Если мы используем jquery.form.js

$('#form1').ajaxSubmit({
    success: function() {
        // do call back
    }
});

Хорошо, теперь приходит мой вопрос:

У меня нет формы в разметке, и я хочу отправить форму с некоторым динамическим содержимым, используя метод 'POST'.

Я хочу сделать вызов функции для имитации процедуры, может быть что-то вроде:

utils.post('/url', {key1: 'value1', key2: 'value2'});

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

Есть ли хороший способ сделать это?


Если проблема не ясна, я могу сделать ужасный пример, чтобы объяснить, чего я хочу:

util.post = function(url, fields) {
    var $form = $('<form action="'+url+'" method="post"></form>');
    var key, val;
    for(key in fields) {
        if(fields.hasOwnProperty(key)) {
            val = fields[key];
            $form.append('<input type="hidden" name="'+key+'" value="'+val+'" />');
        }
    }
    $form.submit();
}

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

13
Alfred Huang

Вы можете использовать jQuery для создания формы функционально, а не путем объединения строк, поэтому специальные символы не будут проблемой.

Вам нужно будет прикрепить эту форму к HTML body перед ее отправкой; последние версии Chrome теперь требуют этого .

var util = {};
util.post = function(url, fields) {
    var $form = $('<form>', {
        action: url,
        method: 'post'
    });
    $.each(fields, function(key, val) {
         $('<input>').attr({
             type: "hidden",
             name: key,
             value: val
         }).appendTo($form);
    });
    $form.appendTo('body').submit();
}
26
Barmar

Поскольку принятый ответ может больше не работать, например, Браузеры на основе хрома в некоторых случаях есть обходной путь:

util.post = function(url, fields) {
  var $form = $('<form>', {
    action: url,
    method: 'post'
  }).append(
    $.map(fields, function(key, val) {
      return $('<input>').attr({
         type: "hidden",
         name: key,
         value: val
      }).appendTo($form);
    })
  )
  var w = window.open("about:blank")
  w.document.write($form[0].outerHTML)
  w.document.forms[0].submit()
}
1
Brian M. Hunt

Ваша единственная проблема в том, что, поскольку у вас нет полей формы для получения данных, вы не можете использовать .serialize для построения массива. Вам просто нужно построить массив вручную.

Key1 ... Keyn может быть именами, которые вы назначаете вместо атрибутов имен полей формы (это то, что на самом деле делает сериализация), а значения могут быть любыми:

  • hTML из div;
  • значения, рассчитанные вами;
  • переменные JavaScript;
  • значения, поступающие из дБ;

Дело в том, что вы не симулируете размещение формы в любом случае. С ajax вы просто делаете это асинхронным и это помогает вам, потому что вам не нужно менять/перезагружать страницу для разработки результатов формы.

0
Lelio Faieta