Ajax实现异步刷新验证用户名是否已存在
由于要做一个注册页面，看到许多网站上都是使用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 > )
return true;
else
return false;
}
catch (Exception e)
{
throw e;
}
finally
{
conn.Close();
}
}
}
}
在后台中验证用户名是否已经存在于数据库中，返回真或者假
运行结果
数据库很简单，只建了一张表userinfo，有3个字段：account、passwd、name
注意：在后台往请求页面写数据时，当写完要发送的数据之后，需要调用Response.end()方法来终止写入，否则可能会发送一个完整页面过去。
Ajax实现异步刷新验证用户名是否已存在的更多相关文章
- ssh整合问题总结--使用struts2+Ajax+jquery验证用户名是否已被注册
在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面 ...
- 《ajax学习》之ajax+JavaScript事件验证用户名是否可注册
当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求. 一.实现思路: 1.用户输入信息 2 ...
- Django——Ajax发送请求验证用户名是否被注册
场景: 用户注册的时候,输入用户名之后,Ajax发送请求到后端,后端验证该用户名是否已经被注册,然后返回到注册页面提示用户. 1.模型: from django.db import models cl ...
- 提交ajax验证用户名是否已存在
前端页面 <tr> <td class="p_label"><span class="notnull"></span& ...
- EasyUI validatebox 自定义ajax验证用户名是否已存在
<td><input type="text" id="userName" name="userName" class=&q ...
- ajax简单操作,验证用户名是否可以
分别使用get,post方法进行提交. 如果输入用户名为admin时,鼠标失去焦点,显示不可以. <!DOCTYPE html> <html lang="en"& ...
- 基于jQuery实现的Ajax 验证用户名唯一性
基于jQuery实现的Ajax 验证用户名唯一性 前端jsp页面代码 <tr> <th><span class="requiredField"> ...
- 使用Ajax验证用户名
Ajax是一项很重要的技术,下面简要举个例子,来解释如何使用Ajax.步骤如下:使用Ajax验证用户名使用文本框的onBlur事件 使用Ajax技术实现异步交互创建XMLHttpRequest对象通过 ...
- 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
随机推荐
- Flash：DisplayObject的transform/matrix的潜规则、小bug
AS3中,使用DisplayObject的transform/matrix,需要先clone出来,再变换,再赋值回去,这样才会对DisplayObject产生影响,不能直接对原Matrix操作. ...
- Flash builder 调试技巧 （分享）
如果这个Flash能直接自己运行,例如Air或者简单不依赖于外部网页的flash,当然非常容易调试.直接F11嘛~~~ 但是,如果这个Flash要依赖于外部环境才能运行,那该怎么调试呢? 核心 ...
- Guava学习之Preconditions
在编写程序的时候,很多时候都需要检查输入的参数是否符合我们的需要,比如人的年龄需要大于0,名字不能为空:如果不符合这两个要求,我们将认为这个对象是不合法的,这时候我们需要编写判断这些参数是否合法的函数 ...
- 【微信小程序】：实现轮播图3秒滚动
wxml模板:(数据一维数组) <scroll-view scroll-y="true"> <swiper autoplay="auto" i ...
- HDUOJ---1867 A + B for you again
A + B for you again Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- 【LeetCode】93. Restore IP Addresses
Restore IP Addresses Given a string containing only digits, restore it by returning all possible val ...
- Oracle自定义函数和存储过程示例，自定义函数与存储过程区别
参考资料:http://www.newbooks.com.cn/info/60861.html oracle自定义函数学习和连接运算符(||) 贴一段中文文档示例,应该就可以开始工作了: --过程(P ...
- SQL Server因为数据库正在使用，所以无法获得对数据库的独占访问权
恢复数据库: 恢复数据库之前,先执行下面这句话 ALTER DATABASE [mpn_stat] SET OFFLINE WITH ROLLBACK IMMEDIATE 执行恢复数据库SQL语句 R ...
- 【Linux】文件种类与扩展名
任何装置在Linux底下都是文件.不仅如此,连数据沟通的接口也有专属的文件在负责-所以,你会了解到,Linux的文件种类真的很多- Linux文件种类 我们在刚刚提到使用『ls -l』观察到第一栏那十 ...
- 【js】正则表达式（II）
JavaScript中提供了一个名为RegExp的对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp对象实例. 在JavaScript中,有两种方式可以创建RegExp对象 ...