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

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

    return o;
}

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

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

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

Call

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

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

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

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