搜尋
首頁php教程PHP开发Jquery Ajax自訂提交表單Form 無刷新

Jquery的$.ajax方法可以實現ajax調用,要設定url,post,參數等。

如果要提交現有Form需要寫很多程式碼,何不直接將Form的提交直接轉移到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直接按照Form資訊直接提交。不刷新頁面。

參考資料: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方法第一個參數,是要提交的form,第二個參數是ajax呼叫成功後的處理函數。

將form的action傳遞給ajax的url,form的method傳遞給ajax的type,再將格式化後的表單內容傳遞給data。

getFormJson方法將form的元素轉換為json格式鍵值對。形如:{name:'aaa',password:'tttt'},注意將同名的放在一個陣列裡。

呼叫

//调用$(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;語句防止Form真實提交


更多Jquery Ajax自訂提交表單Form 無刷新相關文章請關注PHP中文網!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器