web-dev-qa-db-ja.com

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

上記の方法は機能しますが、十分ではないと思います。フィールドに特殊文字などが含まれていると、エラーが発生する場合があります。

javascriptjqueryajaxforms
15
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();
}
28
Barmar

受け入れられた答えは、例えば Chromiumベースのブラウザ 状況によっては、回避策があります：

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()
}
2
Brian M. Hunt

唯一の問題は、データを取得するためのフォームフィールドがないため、.serializeを使用して配列を構築できないことです。アレイを手動で構築する必要があります。

Key1 ... Keynは、フォームフィールドの名前属性（実際にシリアル化するもの）の代わりに割り当てる名前にすることができ、値は何でもかまいません。

  • divからのhtml;
  • あなたが計算した値;
  • javascript変数;
  • dbからの値。

ポイントは、どのような場合でもフォームの投稿をシミュレートしていないということです。 ajaxを使用すると、非同期にするになります。これは、フォームの結果を詳述するためにページを変更/リロードする必要がないため役立ちます。

1
Lelio Faieta