現(xiàn)在很多網(wǎng)站在注冊(cè)用戶(hù)名時(shí)，你只要輸入好要注冊(cè)的用戶(hù)名后，不用提交請(qǐng)求就可以實(shí)時(shí)的顯示用戶(hù)名是否可用，重復(fù)等。這總情況下不能刷新頁(yè)面，而要把用戶(hù)名提交到后臺(tái)比對(duì)，后臺(tái)把結(jié)果返回到前端，前端再顯示出用戶(hù)名是否可用。下面將使用JQuery的ajax方法，和JQuery的表單功能來(lái)實(shí)現(xiàn)我們的需求

創(chuàng)新互聯(lián)專(zhuān)注于企業(yè)成都全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站重做改版、崇州網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為崇州等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

JQuery ajax方法

此方法可以提交任何地方的數(shù)據(jù)到后臺(tái)，實(shí)現(xiàn)代碼如下

在這之前需要加載JQuery的js

$(function () {
    var old_data = $("#id_ServerName").val();
    $("#id_ServerName").change(function () {
        var data = $("#id_ServerName").val();
        if (data !== old_data){
            $.ajax({
                url: "/am/check",
                type: "post",
                data: {"host_name": data},
                success: function (arg) {
                    if (arg === "Error"){
                        $("#id_error_info").removeClass("error_info");
                    }else if (arg === "OK") {
                        $("#id_error_info").addClass("error_info");
                    }else{
                        console.log("OK");
                    }
                },
                fail: function () {
                }
            })
        }else {
            $("#id_error_info").addClass("error_info");
        }
    })
});

實(shí)現(xiàn)思路：

1. 首先是創(chuàng)建一個(gè)自運(yùn)行函數(shù)

2. 然后定義一個(gè)old_data，獲取初始值，根據(jù)業(yè)務(wù)不同，這里不一定大家都需要，如果是注冊(cè)，判斷用戶(hù)名是否存在就不需要，但如果是修改用戶(hù)名，就需要，因?yàn)樾薷挠脩?hù)名的時(shí)候，首先需要獲取到當(dāng)前用戶(hù)名

3. 然后再通過(guò)JQuery獲取id為id_ServerName的標(biāo)簽(通常為input標(biāo)簽)，并監(jiān)聽(tīng)一個(gè)change事件（當(dāng)value發(fā)生更改時(shí)）執(zhí)行一個(gè)函數(shù)

4. 獲取新的值（這個(gè)值是需要傳入后臺(tái)進(jìn)行比對(duì)的數(shù)據(jù)）

5. 判斷新值是否等于老的值，如果等于就不進(jìn)行任何操作，我這里是添加了一個(gè)類(lèi)，這個(gè)類(lèi)是用于將錯(cuò)誤信息隱藏。如果不等于，就需要執(zhí)行ajax將數(shù)據(jù)傳入后臺(tái)，然后后臺(tái)進(jìn)行比對(duì)

6. ajax指定了需要傳入的url（這里分為本域請(qǐng)求和跨域請(qǐng)求，我這里是本域請(qǐng)求，如果是跨域自行百度解決）。指定數(shù)據(jù)傳輸類(lèi)型為post，也可以指定為get。指定了傳入的數(shù)據(jù)，數(shù)據(jù)為一個(gè)字典，key為自定義，value為獲取到的新數(shù)據(jù)，后端接收到就為字典。seccess，定義了一個(gè)函數(shù)，這個(gè)函數(shù)用來(lái)處理請(qǐng)求成功后端返回的數(shù)據(jù)，這個(gè)數(shù)據(jù)用了一個(gè)參數(shù)去接收，參數(shù)名自定義，我這里為arg。Error,OK為后端處理好數(shù)據(jù)后返回的結(jié)果，前端根據(jù)返回結(jié)果做處理。fail也定義了一個(gè)函數(shù)，這個(gè)函數(shù)用來(lái)處理請(qǐng)求失敗時(shí)的處理函數(shù)，比如超時(shí)或者其它

   
   

JQuery 表單驗(yàn)證

此方法可提交form表單內(nèi)指定的數(shù)據(jù)到后臺(tái)，此外表單功能對(duì)ajax做了一些封裝，使其使用更簡(jiǎn)單，更方便，推薦使用，代碼如下

首先需要加載JQuery表單驗(yàn)證的模塊

<script src="/static/jquery.js"></script>
<script src="/static/jquery.validate.min.js"></script>
<script src="/static/messages_zh.js"></scrip

下面是JQuery代碼塊

$().ready(function() {
    $("#commentForm").validate({
        rules: {
            EnvName: {
                required: true,
                remote: {
                    url: "/am/check",
                    type: "post"
                }
            }
        },
        messages: {
            EnvName: {
                required: "請(qǐng)輸入環(huán)境名稱(chēng)",
                remote: "此名稱(chēng)已經(jīng)被使用"
            }
        }
    });
});

實(shí)現(xiàn)思路：

1. 同樣也是創(chuàng)建了一個(gè)自執(zhí)行函數(shù)，調(diào)用了ready方法，此方法又調(diào)用了一個(gè)函數(shù)，至于為什么是ready方法，自行查找相關(guān)資料

2. 找到form表單，這里通過(guò)id找到，然后監(jiān)聽(tīng)一個(gè)validata事件

3. rules用來(lái)定義規(guī)則，EnvName為標(biāo)簽的name屬性，通過(guò)為input標(biāo)簽，也就是需要驗(yàn)證的標(biāo)簽，如果有多個(gè)標(biāo)簽需要驗(yàn)證，那么就在對(duì)應(yīng)的花括號(hào)后面加個(gè)逗號(hào)，然后換行寫(xiě)另外一個(gè)規(guī)則

4. required: true表示此標(biāo)簽為必填

5. remote表示調(diào)用ajax（重點(diǎn)），此方法url表示數(shù)據(jù)要上傳的url，同樣也存在本域請(qǐng)求或者跨域請(qǐng)求，type指定數(shù)據(jù)類(lèi)型，data，指定要傳輸?shù)臄?shù)據(jù)，默認(rèn)為本標(biāo)簽的value，也是以字典形式，其中key為標(biāo)簽的name，value為標(biāo)簽的value，另外這里只接收f(shuō)alse返回值和true返回值，區(qū)別大小寫(xiě)，這里為小寫(xiě)，所以后端處理完數(shù)據(jù)后必須返回指定的字符串，否則無(wú)法處理

6. messages指定當(dāng)規(guī)則里面判斷出錯(cuò)需要提示的消息，比如這里EnvName標(biāo)簽里面，如果此標(biāo)簽沒(méi)有寫(xiě)任何內(nèi)容就會(huì)出現(xiàn)后面指定的提示，如果是遠(yuǎn)程調(diào)用返回false則出現(xiàn)后面指定的提示

關(guān)于JQuery表單驗(yàn)證更多信息參考：菜鳥(niǎo)教程

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱(chēng)欄目：實(shí)時(shí)驗(yàn)證用戶(hù)名是否重復(fù)-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)URL：http://aaarwkj.com/article30/ccdpso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、關(guān)鍵詞優(yōu)化、小程序開(kāi)發(fā)、靜態(tài)網(wǎng)站、App設(shè)計(jì)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)