.net採用ajax實現郵箱註冊和地區選擇執行個體

.net採用ajax實現郵箱註冊和地區選擇執行個體_實用技巧

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了.net採用ajax實現郵箱註冊和地區選擇的方法。分享給大家供大家參考。具體實現方法如下：

首先要知道Ajax是 Asynchronous JavaScript and XML（以及 DHTML 等）的縮寫.

ajax就是在瀏覽器上同伺服器實現非同步互動。在XMLhttpRequest被廣泛使用之前，使用者停留在頁面上沒有辦法實現局部更新的功能，只能通過重新整理整個頁面來擷取最新的資料，而由此代碼的代價是需要傳輸大量的資料，而且有可能臨時的一些使用者資訊也會丟失，而ajax的使用實現了局部更新頁面內容的作用，原理是調用XMLhttpRequest這個代理，向服務發送請求，之後通過ajax定義的處理介面來更新頁面的內容。

接下來用ajax實現郵箱註冊和地區選擇執行個體來說明：

首先前台部分：

複製代碼代碼如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ajax的初步練習使用</title>
<style type="text/css">
div{width:800px;margin:0 auto;height:25px;}
</style>

<script type="text/javascript">
function createRequest()//建立對象
{
           var request;
           try
           {
                request = new XMLHttpRequest();
           }
           catch(microspft)
           {
                try
                {
                    request = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(othermicrosoft)
                {
                    try
                    {
                        request = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch(failed)
                    {
                        request = null;
                    }
                }
           }
           return request;
}
var req = null;//註冊郵箱
function sendRequest()//發送請求
{
            if(document.forms[0].useremail.value=="")
            {
                alert("使用者郵箱不可為空白！");
                document.forms[0].useremail.focus();
                return false;
            }
            req = createRequest();//建立Ajax請求對象
            req.open("GET","default.aspx?Email="+document.forms[0].useremail.value);
            req.send("");//開啟伺服器串連，發送請求
            req.onreadystatechange = dealMethod;//設定伺服器響應完成後要啟動並執行函數
}
function dealMethod()//調用函數
{
            if(req.readyState==4&&req.status==200)//此時是伺服器已經響應完成狀態
            {
                if(req.responseText=="0")//responseText為伺服器響應值屬性
                    document.getElementById("canuse").innerHTML = "<img src='yun_qi_img/icon_need.gif' />"+"該郵箱登入";
                else
                    document.getElementById("canuse").innerHTML = "<img src='yun_qi_img/icon_error.gif'/>"+"該郵箱未註冊";
            }
}
var req2=null;//初始化下拉框
function GetSelect()
{
            req2 = createRequest();
            req2.open("GET","default.aspx?Selected=1");
            req2.send("");
            req2.onreadystatechange=changeSelected;
}
function changeSelected()
{
            if(req2.readyState==4&&req2.status==200)
            {
                var s = req2.responseText;
                var provinces = s.split('&')[0].split('|');//在後台返回欄位中獲得省份子列如(1，河南),(2，江西)等
                var cities = s.split('&')[1].split('|');//在後台返回欄位中獲得城市子列如(1，鄭州),(2，洛陽),(3，開封)等
                document.forms[0].province.length=0;
                for(var i=0;i<provinces.length;i++)
                {
                    var op = new Option();
                    op.value = provinces[i].split(',')[0];
                    op.text = provinces[i].split(',')[1];
                    document.forms[0].province.options.add(op);//將省份編號和省份名分別以value和text的形式添加到select下的option裡面
                }
                document.forms[0].city.length=0;
                for(var j=0;j<cities.length;j++)
                {
                    var op2 = new Option();
                    op2.value = cities[j].split(',')[0];
                    op2.text = cities[j].split(',')[1];
                    document.forms[0].city.options.add(op2);//將城市編號和城市名分別以value和text的形式添加到select下的option裡面
                }
            }
}
var req3=null;//改變省份觸動城市的改變
function GetCity()
{
            req3 = createRequest();
            req3.open("GET","default.aspx?ProId="+document.forms[0].province.value);
            req3.send("");
            req3.onreadystatechange=changeCity;
}
function changeCity()
{
            if(req3.readyState==4&&req3.status==200)
            {
                var s = req3.responseText;
                var cities = s.split('|');
                document.forms[0].city.length=0;
                for(var i=0;i<cities.length;i++)
                {
                    var op = new Option();
                    op.value = cities[i].split(',')[0];
                    op.text = cities[i].split(',')[1];
                    document.forms[0].city.options.add(op);
                }
            }
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <table align="center">
    <tr>
    <th>Email</th>
    <th><input type="text" name="useremail" value=""/></th>
    <th id="canuse"></th>
    <th></th>
    </tr>
    <tr>
    <th><select name="province" onchange="GetCity();"></select></th>
    <th><select name="city"></select></th>
    <th><input type="button" value="註冊" onclick="sendRequest();"/></th>
    </tr>
    </table>
    </form>
</body>
<script type="text/javascript">
GetSelect();
</script>
</html>

然後是後台部分：

複製代碼代碼如下:

public partial class _Default : System.Web.UI.Page
{
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.QueryString["Email"] != null)//註冊郵箱
            {

               //通常情況下，這裡的資料來源應該是從某一個資料庫裡面讀取的，這裡為了方便就隨便的定義了一個死板的資料代替了
                string bbb = "2320774925@qq.com";
                string aaa = Request.QueryString["Email"];
                if (aaa == bbb)
                    Response.Write("0");
                else
                    Response.Write("1");
                Response.End();
            }
//常規情況下，接下來的兩個處理部分應該用到兩張資料表
            if (Request.QueryString["Selected"] != null)//初始化下拉框
            {

               //通常情況下這裡的資料應該是從資料庫裡面讀取的，然後擷取到省份編號為1對應下的所有城市編號和城市名稱，接著按照某些方法首先將省份表裡面的兩列資料群組合成形如"1,河南|2,浙江|3,湖北|4,江蘇|5,安徽|6,山東|7,江西“這樣的字串，最後加上省份編號為1對應下的所有城市編號和城市名稱最終形成形如"1,河南|2,浙江|3,湖北|4,江蘇|5,安徽|6,山東|7,江西&1,鄭州|2,洛陽|3,開封|4,信陽|5,南陽|6,駐馬店|7,安陽|8,鶴壁|9,濮陽|10,平頂山"這樣的一列字串回傳到前端
                string result = "1,河南|2,浙江|3,湖北|4,江蘇|5,安徽|6,山東|7,江西&1,鄭州|2,洛陽|3,開封|4,信陽|5,南陽|6,駐馬店|7,安陽|8,鶴壁|9,濮陽|10,平頂山";
                Response.Write(result);
                Response.End();
            }
            if (Request.QueryString["ProId"] != null)//改變省份觸動城市的改變
            {

               //通常情況下這裡的資料依然應該是從資料庫裡面讀取的，在前端部分，初始化了下拉框之後，所有的省份將被填充到province下拉框中，省份編號為1 的所有城市也將被填充到city下拉框中，此時，當你重新選擇省份的時候，伺服器將會接收到一個新的資料，其實這個資料也就是所謂的省份編號了，然後這裡通過這個省份編號獲得對應下的所有城市編號和城市名稱，通過一定的方法處理最終獲得形如"1,鄭州|2,洛陽|3,開封|4,信陽|5,南陽"這樣的字串回傳給前端
                int num = Int32.Parse(Request.QueryString["ProId"]);
                if (num == 1)
                    Response.Write("1,鄭州|2,洛陽|3,開封|4,信陽|5,南陽");
                if (num == 2)
                    Response.Write("1,杭州|2,寧波|3,溫州|4,嘉興|5,湖州");
                if (num == 3)
                    Response.Write("1,武漢|2,黃石|3,十堰|4,宜昌|5,荊州");
                if (num == 4)
                    Response.Write("1,南京|2,無錫|3,徐州|4,常州|5,蘇州");
                if (num == 5)
                    Response.Write("1,合肥|2,蕪湖|3,蚌埠|4,淮南|5,馬鞍山");
                if (num == 6)
                    Response.Write("1,濟南|2,青島|3,淄博|4,棗莊|5,東營");
                else
                    Response.Write("1,南昌|2,景德鎮|3,萍鄉|4,九江|5,新喻");
                Response.End();
            }
        }
}

希望本文所述對大家的.net程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More