在注册的时候,常会进行用户名验证,如果输入的用户名已经存在,立刻给出提示而不是等信息填写完后进行验证,如果输入信息很多的话,不仅信息会丢失,并且会进行一次回传,很恼火,那么注册的时候使用Ajax验证一下,就可以避免这些问题了,下面给出最简单的使用示例,判断用户名是否存在:
第一种:最原始的JS验证
HMTL代码:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
<script language="javascript" type="text/javascript" src="CheckUserName.js"></script>
<script language="javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Ajax Example:</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Example 1:Check UserName IsExists</td>
</tr>
<tr>
<td>
<asp:Label ID="lblUserName" runat="server" Text="用户名："></asp:Label>
<input id="txtUserName" type="text" onblur="onBlur()"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
//CheckUserName.js
var ajax = function(option)
{
var request;
var createRequest = function()
{
var request;
if (window.XMLHttpRequest)
{
request = new XMLHttpRequest();
}
else
{
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
}
return request;
}
var sendRequest = function()
{
request = createRequest();
// request.open("post", option.url, true);
// request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// request.onreadystatechange = ResponseRequest;
// request.send(option.param);
request.open("get", option.url+"?t=0", true);
request.onreadystatechange = ResponseRequest;
request.send(null);
}
var ResponseRequest = function()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
option.Success(request);
}
else
{
option.Failure(request);
}
}
}
sendRequest();
}
var onBlur = function()
{
var option = { url: "Test.aspx", param: "t=1", Success:function(request){alert(request.responseText);}, Faitrue: function(request) { alert(false) } };
new ajax(option);
}
//Test.aspx
protected void Page_Load(object sender, EventArgs e)
{
if (Request["t"] != null)
{
this.Response.Clear();
string t = Request["t"].ToString();
if (t == "1")
{
Response.Write("用户名已存在，请填写其他的用户名!");
}
else if (t == "0")
{
Response.Write("该用户名没被注册，可以使用!");
}
this.Response.End();
}
}
第二种方式:利用JQuery框架ajax验证
HMTL代码:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#Button1").click(function() {
$.ajax({
type: "get",
url: "ResponsePage.aspx?t=0",
dataType: 'html',
success: function(data) {
alert("post " + data);
},
error: function() { alert('error!'); }
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="显示" />
</div>
</form>
</body>
</html>
//ResponsePage.apsx
protected void Page_Load(object sender, EventArgs e)
{
this.Response.Clear();
string t = Request["t"].ToString();
if (t == "1")
{
Response.Write("用户名已存在，请填写其他的用户名!");
}
else if (t == "0")
{
Response.Write("该用户名没被注册，可以使用!");
}
this.Response.End();
}
分享到：
相关推荐
在"ajax异步验证用户名是否存在"的场景中，主要涉及以下几个步骤： 1. **前端交互**：当用户在注册表单中输入用户名并失去焦点时，JavaScript事件监听器会被触发。我们可以使用`addEventListener`来监听`blur`事件...
利用AJax调用数据库，验证用户名是否存在。本资源用VS2013所写，版本低导致打不开可用记事本查看，打开“验证用户名是否存在.aspx”和“WebService1.asmx.cs”两个文件即可。PS：请务必添加jquery-1.10.2.js文件。
本话题主要探讨如何利用Ajax实现用户注册时验证用户名是否已存在的功能，以及Rapid Validate工具的使用。 首先，当用户在注册界面输入用户名时，我们可以使用Ajax发送异步请求到服务器，查询数据库中该用户名是否已...
总结来说，这个"DWR验证用户名是否存在的例子"展示了如何利用DWR将Java后端逻辑集成到前端，实现无刷新的用户名验证。对于初学者，这是一个很好的起点，能够理解前后端交互的基本流程，同时了解DWR框架的使用。
### AJAX与Struts结合实现无刷新验证用户名是否存在 在Web开发中，用户体验是至关重要的因素之一。传统的表单提交方式往往会导致整个页面重新加载，这不仅降低了用户体验，还增加了服务器的负担。为了解决这一问题...
在ASP.NET中使用jQuery实现无刷新的验证用户名是否存在，是一种典型的AJAX应用，它通过异步请求与服务器交互，无需重新加载整个页面即可完成数据的校验，极大地提升了用户体验。以下是对这一知识点的详细解析： ###...
**Ajax验证用户名是否存在** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心是利用JavaScript与服务器进行异步数据交换，使得用户可以一边浏览网页...
"Ajax验证用户名是否存在"是一个常见的功能，它使得用户在输入用户名时可以即时得到反馈，无需频繁地提交表单来检查用户名是否已被占用。这个功能通过利用Ajax（异步JavaScript和XML）技术实现，极大地提升了交互性...
本教程将深入探讨如何使用JQuery表单验证插件实现后天发送验证用户名是否存在的功能。 首先，我们需要理解JQuery的核心概念。JQuery允许我们通过选择器选取DOM元素，然后应用各种方法来操作这些元素。在表单验证中...
jQuery AJAX 提供了一种异步的方式，使得客户端可以无刷新地与服务器进行交互，验证用户名是否已被占用。以下是对标题和描述中所述知识点的详细解释： 1. **jQuery AJAX**： jQuery 的 AJAX 方法允许开发者在不...
实现AJAX无刷新验证用户名存在的基本步骤如下： 1. **前端交互**：首先，我们需要在HTML中创建一个输入框让用户输入用户名，并添加一个按钮或者在失去焦点时触发验证。通过JavaScript监听事件，如`onkeyup`、`...
在本示例中，"json验证用户名是否存在" 的主题聚焦于如何利用JSON进行用户身份验证，特别是检查一个特定的用户名是否已经被系统注册或存在。这个过程在用户注册、登录或者其他需要验证用户身份的场景中非常重要。 ...
在网页应用中，验证用户名是否已经存在是一项基本但至关重要的功能。这有助于确保用户注册时选择的用户名是唯一的，防止重名现象发生。jQuery，一个广泛使用的JavaScript库，提供了丰富的功能来简化前端交互，包括...
### Ajax验证用户名是否存在示例详解 #### 一、概述 在Web开发中，为了提高用户体验，经常会在用户输入用户名时即时验证该用户名是否已经被其他用户注册。这种验证方式可以通过Ajax技术实现，即在用户输入的同时向...
本文将深入探讨如何结合这三个技术实现无刷新验证用户名是否存在的功能。 Struts是一个基于MVC（Model-View-Controller）设计模式的Java Web框架，它帮助开发者更好地组织应用程序的结构，提高代码的可维护性和可...
【SSH2 + AJAX + jQuery + JSON 验证用户名是否存在】是一种常见的前端与后端交互技术，用于实现实时检查用户在注册或登录时输入的用户名是否已经被占用。在这个过程中，SSH2代表Secure Shell 2，通常用于服务器端的...
在本项目"ssm+ajax 验证用户名是否已存在"中，我们将探讨如何利用SSM框架和Ajax技术来实时检查用户在注册时输入的用户名是否已经被其他用户占用。 首先，Spring作为整个项目的依赖注入容器，负责管理应用中的对象，...
### json+jqeury+struts+js验证用户名是否存在 #### 概述 本文将详细介绍如何通过结合使用JSON、jQuery、Struts以及JavaScript技术来实现一个完整的用户名称验证系统。此系统能够有效地检测用户输入的用户名是否已...