Ajax怎么實現(xiàn)異步刷新驗證用戶名是否已存在

發(fā)布時間：2021-07-26 13:43:56 來源：億速云閱讀：172 作者：chen 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“Ajax怎么實現(xiàn)異步刷新驗證用戶名是否已存在”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

都是簡單的實例，所以直接發(fā)代碼

靜態(tài)頁面Ajax.html

復(fù)制代碼代碼如下:

<html>
    <head>
        <title>Ajax</title>
        <script type="text/javascript">
            function loadXMLDoc() {
                if (document.getElementById("account").value == "") {
                    document.getElementById("accDiv").innerHTML = "用戶名不能為空";
                    return;
                }
                var xmlHttp;
                if(window.XMLHttpRequest) { // code for IE7+
                    xmlHttp = new XMLHttpRequest();
                }
                else { // code for IE5/IE6
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlHttp.onreadystatechange = function () {
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        //document.getElementById("myDiv").innerHTML=xmlHttp.responseText;
                        if (xmlHttp.responseText == "true") {
                            document.getElementById("accDiv").innerHTML = "用戶名不可用";
                        }
                        else {
                            document.getElementById("accDiv").innerHTML = "用戶名可用";
                        }
                    }
                }
                var a = document.getElementById("account").value;
                // get
                xmlHttp.open("GET", "validate.aspx?account=" + a + "&random=" + Math.random, true);
                xmlHttp.send();
            }
            function delData() {
                document.getElementById("account").value = "";
                document.getElementById("accDiv").innerHTML = "";
            }
        </script>
    </head>
    <body>
        <h4>ajax</h4>
        <table>
            <tr>
                <td>賬號：</td><td><input id="account" type="text" onblur="loadXMLDoc();" onfocus="delData();"/></td><td><div id="accDiv"></div></td>
            </tr>
            <tr>
                <td>密碼：</td><td><input id="passwd" type="password" /></td>
            </tr>
            <tr>
                <td>確認(rèn)密碼：</td><td><input id="vPasswd" type="password" /></td>
            </tr>
            <tr>
                <td>姓名：</td><td><input id="name" type="text" /></td>
            </tr>
        </table>

    </body>
</html>

在賬號輸入框失去焦點時調(diào)用函數(shù)

訪問服務(wù)器使用的是Get方法，所以在參數(shù)處使用了附加隨機(jī)碼來避免緩存。

驗證頁面validate.aspx后臺代碼：

復(fù)制代碼代碼如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.Sql;
using System.Data.SqlClient;

public partial class Ajax_validate_validate : System.Web.UI.Page
{
public SqlConnection conn;

    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
        if (Exists(Request.QueryString["account"]))
            Response.Write("true");
        else
            Response.Write("false");
        Response.End();
    }
    /// <summary>
    /// 獲取數(shù)據(jù)庫連接
    /// </summary>
    /// <returns></returns>
    protected SqlConnection GetConnection()
    {
        string str = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        conn = new SqlConnection(str);
        return conn;
    }
    protected bool Exists(string account)
    {
        using (GetConnection())
        {
            try
            {
                conn.Open();
                string sqlStr = "select count(*) from userinfo where account='" + account + "'";
                SqlCommand cmd = new SqlCommand(sqlStr, conn);
                int row = Convert.ToInt32(cmd.ExecuteScalar());
                if (row > 0)
                    return true;
                else
                    return false;
            }
            catch (Exception e)
            {
                throw e;
            }
            finally
            {
                conn.Close();
            }
        }
    }
}

在后臺中驗證用戶名是否已經(jīng)存在于數(shù)據(jù)庫中，返回真或者假

運(yùn)行結(jié)果：

Ajax怎么實現(xiàn)異步刷新驗證用戶名是否已存在

數(shù)據(jù)庫很簡單，只建了一張表userinfo，有3個字段：account、passwd、name

注意：在后臺往請求頁面寫數(shù)據(jù)時，當(dāng)寫完要發(fā)送的數(shù)據(jù)之后，需要調(diào)用Response.end()方法來終止寫入，否則可能會發(fā)送一個完整頁面過去。

“Ajax怎么實現(xiàn)異步刷新驗證用戶名是否已存在”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

向AI問一下細(xì)節(jié)

Ajax怎么實現(xiàn)異步刷新驗證用戶名是否已存在

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽