jQuery ajax submit Formフォームの例（デモソースコード付き）_jquery

この記事の例では、Form フォームを送信する jQuery ajax メソッドについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

Jquery の $.ajax メソッドは、Ajax 呼び出しを実装し、URL、ポスト、パラメーターなどを設定できます。

既存のフォームを送信するために多くのコードを記述する必要がある場合は、フォームの送信を直接 ajax に転送してみてはいかがでしょうか。

以前の取り扱い方法

たとえば、フォームのコードは次のとおりです:

<form id="Form1" action="action.aspx" method="post" >
名称：<input name="name" type="text" /><br />
密码：<input name="password" type="password" /><br />
手机：<input name="mobile" type="text" /><br />
说明：<input name="memo" type="text" /><br />
<input type="submit" value="提 交" />
</form>

送信されると、action.aspx ページにジャンプします。そして、値は Request.Params["name"] を通じて取得できます。

思考

ajax を使用してページを更新したくない場合は、$.ajax に URL やその他の情報を指定する必要があり、メンテナンスが困難です。

オンラインで調べたところ、外国人はずっと前に解決策を持っていたことがわかりました。 ajax を使用して、フォーム情報に従って直接送信します。ページを更新しません。

参考: http://jquery.malsup.com/form/

とても便利ですが、自分用にも書きたいと思います。

コア JS コード

//将form转为AJAX提交
function ajaxSubmit(frm, fn) {
  var dataPara = getFormJson(frm);
  $.ajax({
    url: frm.action,
    type: frm.method,
    data: dataPara,
    success: fn
  });
}
//将form中的值转换为键值对。
function getFormJson(frm) {
  var o = {};
  var a = $(frm).serializeArray();
  $.each(a, function () {
    if (o[this.name] !== undefined) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });
  return o;
}

ajaxSubmit メソッドの最初のパラメーターは送信されるフォーム、2 番目のパラメーターは ajax 呼び出しが成功した後の処理関数です。

フォーム アクションを ajax URL に渡し、フォーム メソッドを ajax タイプに渡し、書式設定されたフォーム コンテンツをデータに渡します。

getFormJson メソッドは、フォーム要素を JSON 形式のキーと値のペアに変換します。 {name:'aaa',password:'tttt'} の形式では、同じ名前のものを配列に入れるように注意してください。

は

を呼び出します

//调用
$(document).ready(function(){
  $('#Form1').bind('submit', function(){
    ajaxSubmit(this, function(data){
      alert(data);
    });
    return false;
  });
});

ajaxSubmit メソッドを呼び出す前に、alert(data) で独自の呼び出し戻り後処理コードを追加して、データが正しいかどうかを確認できます。

ajaxSubmit メソッドを呼び出した後、フォームが送信されないように return false ステートメントを追加する必要があります。

完全なサンプルコードについては、ここをクリックしてくださいこのサイトからダウンロードしてください。

さらに jQuery 関連のコンテンツに興味のある読者は、このサイトの特別トピック「jquery における Ajax の使い方のまとめ」、「jQuery テーブル (テーブル) の操作スキルのまとめ」をご覧ください。 "、"JQuery ドラッグ アンド ドロップの特殊効果とスキルの概要"、"jQuery 拡張スキルの概要"、"jQuery の共通クラシック特殊効果の概要" 、「jQuery アニメーションと特殊効果の使い方まとめ」、「jQuery セレクターの使い方まとめ」、「jQuery の共通プラグインと使い方まとめ」

この記事が jQuery プログラミングのすべての人に役立つことを願っています。