ajax 服务器文本框自动填值
更新时间：2009年06月12日 19:28:19 作者：
最近二天。项目做完了。闲着没事做就自己写了一点东西。在写的过程中。发现利用服务器的文本框去查找用户的相关信息的时刻总要去刷新页面。
这样的话就增加了服务器的负担。后面自己他细想了一下。想利用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;
}
}
}
效果：运行前只有用户名文本框可用
当用户输入用户名称后：鼠标离开文本框后效果如下：
前台代码：
复制代码 代码如下:
<%@ 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;
}
}
}
效果：运行前只有用户名文本框可用
当用户输入用户名称后：鼠标离开文本框后效果如下：
相关文章
解决Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"
这篇文章主要介绍了Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了ajax实现提交时校验表单方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了asp.net+ajax简单分页实现方法,结合实例形式较为详细的分析了ajax分页的具体实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别实例分析
这篇文章主要介绍了IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别,结合实例分析说明了ajax参数传递过程中的参数转码相关注意事项与使用技巧,需要的朋友可以参考下2015-12-12
下面小编就为大家带来一篇关于ajax网络请求的封装实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
今天小编就为大家分享一篇layui的checbox在Ajax局部刷新下的设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本文给大家介绍了ajax实现跨域访问的3种解决方案，非常的实用，个人比较推荐第三种，小伙伴们可以着重看下。2015-06-06
这篇文章主要介绍了Ajax带提示的验证表单,可实现对表单输入进行实时提示的功能,非常简单实用,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了ajax无刷新验证注册信息示例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
应用程序通过XMLHttpRequest对象以后台的方式从服务器获取数据，通过CSS和DOM改变界面的外观，感兴趣的朋友可以了解下本文2014-01-01
最新评论