Имитировать отправку формы сообщения с помощью вызова функции с помощью 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();
}

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

Ответ 1

Вы можете использовать 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();
}

Ответ 2

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

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

html из div;
значения, рассчитанные вами;
переменные javascript;
значения, исходящие из db;

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

Ответ 3

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

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