Ajax实现异步刷新验证用户名是否已存在的具体方法
都是简单的实例，所以直接发代码
静态页面Ajax.html
<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>
<h3>ajax</h3>
<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>确认密码：</td><td><input id="vPasswd" type="password" /></td>
</tr>
<tr>
<td>姓名：</td><td><input id="name" type="text" /></td>
</tr>
</table>
</body>
</html>
在账号输入框失去焦点时调用函数
访问服务器使用的是Get方法，所以在参数处使用了附加随机码来避免缓存。
验证页面validate.aspx后台代码：
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>
/// 获取数据库连接
/// </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();
}
}
}
}
在后台中验证用户名是否已经存在于数据库中，返回真或者假
运行结果：
数据库很简单，只建了一张表userinfo，有3个字段：account、passwd、name
注意：在后台往请求页面写数据时，当写完要发送的数据之后，需要调用Response.end()方法来终止写入，否则可能会发送一个完整页面过去。
相关文章
ASP.NET Core读取Request.Body的正确方法
相信大家在使用ASP.NET Core进行开发的时候，肯定会涉及到读取Request.Body的场景，毕竟我们大部分的POST请求都是将数据存放到Http的Body当中，本文就介绍一下ASP.NET Core读取Request.Body，感兴趣的可以了解一下2021-05-05
Entity Framework使用Code First模式管理视图
本文详细讲解了Entity Framework使用Code First模式管理视图的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
nunit使用指南之—NUnit Quick Start...2007-03-03
ASP.Net使用System.Security.Principal模拟用户
这篇文章介绍了ASP.Net使用System.Security.Principal模拟用户的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
加密web.config的方法分享，需要的朋友可以参考一下2013-03-03
这篇文章主要介绍了.Net Core读取Json配置文件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
由于最近在业务上的需要，利用.NET把一个文件夹下面的所有文件读取，然后从文件中正则匹配出所有的电子邮件，然后写入到一个新的文件夹，需求就这样，很简单。代码写作也不超过10min，发上来吧。哈哈2008-12-12
剖析ASP.NET MVC的DependencyResolver组件
这篇文章主要为大家剖析ASP.NET MVC的DependencyResolver组件，感兴趣的小伙伴们可以参考一下2016-04-04
.NET Framework 的项目如何使用 FTP 下载文件
本文专门针对面向 .NET Framework 的项目, 对于面向 .NET 6 及更高版本的项目,不再支持 FTP,此示例演示如何从 FTP 服务器下载文件,感兴趣的朋友跟随小编一起看看吧2024-01-01
虽然扩展方法只是改变了我们写代码的方式，但是如果我们使用得当，可以给我们带来巨大的编码效率的提升接下来介绍通过扩展方法（链式方法）为MVC 3视图添加验证2013-01-01
最新评论