利用ajax為伺服器文字框自動填值

最後更新：2018-12-03 來源：互聯網

上載者：User

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

最近二天。項目做完了。閑著沒事做就自己寫了一點東西。在寫的過程中。發現利用伺服器的文字框去尋找使用者的相關資訊的時刻總要去重新整理頁面。這樣的話就增加了伺服器的負擔。後面自己他細想了一下。想利用ajax去實現這樣一個效果。代碼如下：

前台代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ServerTextBoxdata.aspx.cs" Inherits="Default3" %>

<!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>通過使用者名稱自動填滿使用者其他資訊</title>
    <script language="javascript" type="text/javascript" src="ajax/jquery.js"></script>
    <script language="javascript" type="text/javascript">
    //擷取使用者名稱文字框的值
    function WritedataText()
    {
          var username=$("#Txtusename").val();
          if(username.length==0)
          {
            alert("輸入的使用者名稱不可為空");
            return ;
          }
          //執行通過使用者名稱尋找使用者的相關資訊
        $.ajax({
                type:'POST',
                url:'ServerTextBoxdata.aspx',
                data:{action:'action',Username:username},
                success:WritedataTextcallback
        })
    }
    //通過使用者名稱尋找使用者的相關資訊的回呼函數
    function WritedataTextcallback(r)
    {
    if(r=="no")
    {
       alert("輸入的使用者名稱不存在。請重新輸入");
    }
    else
    {
    var data=r;
    var array=new Array();
    array=data.split(",");
    //為文字框賦值
    $("#fullname").val(array[0]);
    $("#Email").val(array[1]);
    $("#mobilphone").val(array[2]);
    $("#qq").val(array[3]);
    }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
    <table style="text-align:center;width:800px">
    <tr style=" background-color:Yellow; width:800px">
    <td colspan='2' style="text-align:center"> <font size="5" color="red">使用者詳細資料</font></td>
     </tr>
    <tr><td colspan='2' style=" text-align:left"> 使用者名稱稱：<asp:TextBox ID="Txtusename" runat="server"></asp:TextBox></td></tr>
    <tr><td style=" text-align:left;width:400px"> 使用者全名：<asp:TextBox ID="fullname" runat="server" ReadOnly="true"></asp:TextBox></td><td style=" text-align:left; width:400px">使用者郵箱：<asp:TextBox ID="Email" ReadOnly="true" runat="server"></asp:TextBox></td></tr>
    <tr><td style=" text-align:left;width:400px">手機號碼：<asp:TextBox runat="server" ID="mobilphone" ReadOnly="true"></asp:TextBox></td><td style=" text-align:left; width:400px">
        使用者QQ  ：<asp:TextBox runat="server" ID="qq" ReadOnly="true"></asp:TextBox></td></tr>
    </table>
    </div>
    </form>
</body>
</html>
後台代碼：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class Default3 : System.Web.UI.Page
{
    string StrAction = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        StrAction = Request["action"];
        //為伺服器控制項添加失去焦點的事件       讓伺服器控制項不重新整理的關鍵
        Txtusename.Attributes.Add("onblur", "WritedataText()");
        Txtusename.Focus();
        if (StrAction == "action")
        {
            //擷取使用者輸入的名稱
            string username = Request["Username"];
            if (!Isusername(username))
            {
                Response.Clear();
                Response.ContentType = "application/text";
                Response.Write("no");
                Response.End();
            }
            else
            {
                InitData(username);
            }
        }
    }
    /// <summary>
    /// 建立人：周昕
    /// 建立時間：2009-06-11
    /// 方法名稱：InitData
    /// 作用：尋找使用者的詳細資料
    /// </summary>
    /// <param name="username"></param>
    public void InitData(string username)
    {
        SqlConnection mycon = new SqlConnection();
        mycon.ConnectionString = ConfigurationManager.ConnectionStrings["BoBoConn"].ToString();
        string sql = "select Fullname,Email,MobilePhone,QQ from loginuser where username='"+username+"'";
        mycon.Open();
        SqlCommand mycom = new SqlCommand(sql, mycon);
        SqlDataReader myda = mycom.ExecuteReader();
        while (myda.Read())
        {
            string fullname = myda["Fullname"].ToString();
            string Email = myda["Email"].ToString();
            string MobilePhone = myda["MobilePhone"].ToString();
            string QQ = myda["QQ"].ToString();
            string array = fullname + "," + Email + "," + MobilePhone+","+QQ;
                Response.Clear();
                Response.ContentType = "application/text";
                Response.Write(array);
                Response.End();
        }


    }
    /// <summary>
    /// 建立人：周昕
    /// 建立時間：2009-06-11
    /// 方法名稱：Isusername
    /// 作用：返回bool值判斷使用者是否存在
    /// </summary>
    /// <param name="username"></param>
    /// <returns></returns>
    public bool Isusername(string username)
    {

        SqlConnection mycon = new SqlConnection();
        mycon.ConnectionString = ConfigurationManager.ConnectionStrings["BoBoConn"].ToString();
        string sql = "select count(*) from loginuser where username='" + username + "'";
        mycon.Open();
        SqlCommand mycom = new SqlCommand(sql, mycon);
        int n = (int)mycom.ExecuteScalar();
        mycon.Close();
        if (n > 0)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}
效果：運行前只有使用者名稱文字框可用

當使用者輸入使用者名稱稱後：滑鼠離開文字框後效果如下：

本文章原先以中文撰寫並發佈於 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