更新なしのJquery Ajaxカスタム送信フォーム

高洛峰
リリース: 2016-12-16 15:28:58
オリジナル
1508 人が閲覧しました

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

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

先ほどの処理方法

例えばFormコードは以下の通り

<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 || &#39;&#39;);
        } else {
            o[this.name] = this.value || &#39;&#39;;
        }
    });

    return o;
}
ログイン後にコピー

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

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

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

Call

//调用$(document).ready(function(){
    $(&#39;#Form1&#39;).bind(&#39;submit&#39;, function(){
        ajaxSubmit(this, function(data){
            alert(data);
        });        return false;
    });
});
ログイン後にコピー

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

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


Jquery Ajax カスタム送信フォーム フォームの更新なしに関するその他の記事については、PHP 中国語 Web サイトに注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!