[ASP] asp 中的ajax使用
这里的ajax主要用于在注册时通过查询数据库检验是否有同样用户名，并实时返回结果。
语言：前台html，后台asp+access。
前台register.html代码：
Code<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册</title>
</head>
<body>
<div class="register-box">
<table border="0">
<tr>
<td valign="middle" class="label">邮箱(登录时账号)：</td>
<td><input name="email" type="text" id="email"/></td>
<td class="left"><div id="loginid_info"></div><div id="email_info"></div></td>
</tr>
<tr>
<td>密码：</td>
<td><input name="password" type="password" id="password"/></td>
<td class="left"><div id="pass_info"></div></td>
</tr>
<tr>
<td>密码确认：</td>
<td><input name="passwordAgain" type="password" id="passwordAgain"/> </td>
<td class="left"><div id="passAgain_info"></div></td>
</tr>
<tr>
<td>姓名：</td>
<td><input name="studentName" type="text" id="studentName"/></td>
<td class="left"><div id="name_info"></div></td>
</tr>
<tr >
<td>学号：</td>
<td><input name="studentNumber" type="text" id="studentNumber"/></td>
<td class="left"><div id="number_info"></div></td>
</tr>
<tr>
<td>联系方式：</td>
<td><input name="contact" type="text" id="contact" onkeydown="KeyDown()"/></td>
<td class="left"><div id="contact_info"></div></td>
</tr>
</table>
<table class="submit" border="0">
<tr>
<td><a onclick="getResult()"><div class="button1">提交</div></a></td>
<td><a onclick="resetAll()"><div class="button1">清空</div></a></td>
</tr>
</table>
<script language="javascript">
function KeyDown() //这里用来使得回车键也有点击注册的效果
{
if (event.keyCode == 13)
{
event.returnValue=false;
event.cancel = true;
getResult();
}
}
</script>
</div>
</body>
</html>
<script language="javascript">
var XmlHttp;
try{XmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用Ajax，定义变量XmlHttp
}catch(e){
try{xmlHttp = new ActiveCobject("Microsoft.XMLHTTP");
}catch(e){}
}
function resetAll()
{
document.getElementById("email").value = ""; //清空按钮按下后的函数
document.getElementById("studentName").value = "";
document.getElementById("studentNumber").value = "";
document.getElementById("password").value = "";
document.getElementById("passwordAgain").value = "";
document.getElementById("contact").value = "";
}
function getResult() //提交注册后的函数
{
document.getElementById("email_info").innerHTML = "";
document.getElementById("email_info").innerHTML = "";
document.getElementById("name_info").innerHTML = "";
document.getElementById("number_info").innerHTML = "";
document.getElementById("pass_info").innerHTML = "";
document.getElementById("contact_info").innerHTML = "";
document.getElementById("passAgain_info").innerHTML = "";
var u_emial = ""+document.getElementById("email").value;
var u_Name = ""+document.getElementById("studentName").value;
var u_num = ""+document.getElementById("studentNumber").value;
var u_pass = ""+document.getElementById("password").value;
var u_passAg = ""+document.getElementById("passwordAgain").value;
var u_contact = ""+document.getElementById("contact").value;
var flag = true;
if( u_emial == "" ) //首先在本地判断注册的信息是否合法
{
document.getElementById("email_info").innerHTML = "用户邮箱不能为空！";
flag = false;
}
else
{
var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
flag = pattern.test(u_emial);
if( !flag )
{
document.getElementById("email_info").innerHTML = "邮箱名称不合法！";
flag = false;
}
}
if( u_Name == "" )
{
document.getElementById("name_info").innerHTML = "用户姓名不能为空！";
flag = false;
}
if( u_num == "" )
{
document.getElementById("number_info").innerHTML = "用户学号不能为空！";
flag = false;
}
else
{
var re,r;
re = /\d*/i;
r = u_num.match(re);
if( r!=u_num )
{
document.getElementById("number_info").innerHTML = "用户学号必须均为数字！";
flag = false;
}
}
if( u_pass == "" )
{
document.getElementById("pass_info").innerHTML = "用户密码不能为空！";
flag = false;
}
if( u_passAg != u_pass )
{
document.getElementById("passAgain_info").innerHTML = "两次密码输入不相同！";
flag = false;
}
if( u_contact == "" )
{
document.getElementById("contact_info").innerHTML = "用户联系方式不能为空！";
flag = false;
}
else
{
var re,r;
re = /\d*/i;
r = u_contact.match(re);
if( r!=u_contact )
{
document.getElementById("contact_info").innerHTML = "用户联系方式必须均为数字！";
flag = false;
}
}
if( flag ) //判断后若合格，查询数据库看是否已有同样的用户名
{
var url = "";
url += "Register.asp?email=";
url += document.getElementById("email").value; //在地址后面追加参数，由于ajax技术是不会在地址栏里显的，
//所以可以以这种方式传递
url += "&studentName=";
url += escape(document.getElementById("studentName").value);
url += "&studentNumber=";
url += document.getElementById("studentNumber").value;
url += "&password=";
url += document.getElementById("password").value;
url += "&contact=";
url += document.getElementById("contact").value;
XmlHttp.Open( "POST",url, false );
XmlHttp.Send();
if(XmlHttp.status == 200 || xmlHttp.status==0) //响应处理函数
{
var result = XmlHttp.responseText;
if( result == "0" )
document.getElementById("loginid_info").innerHTML = "该邮箱地址已经存在！";
if( result == "1" )
{
alert("注册成功！跳转到答题页面！");
window.navigate("test.swf?loginerEmail="+u_emial);
}
}
}
}
</script>
后台Register.asp
Code<%@language="JavaScript" CODEPAGE="65001"%>
<%
var email = Request.QueryString("email");
var studentName = unescape(Request.QueryString("studentName"));
var studentNumber = Request.QueryString("studentNumber");
var password = Request.QueryString("password");
var contact = Request.QueryString("contact");
//数据库的相关操作
//======================================
var conn;
var rs;
var sql;
var strPath;
strPath="App_Data/DataBase/user%&123&@#789Info.mdb";
try
{
conn = Server.CreateObject("ADODB.Connection");
conn.connectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath(strPath);
conn.open();
}
catch(e)
{
Response.Write("3"); //返回3说明错在连接
}
try
{
rs=Server.CreateObject("ADODB.Recordset");
rs.open("SELECT * FROM userInfo",conn,1,3);
rs.addnew;
rs("email") = email;
rs("studentName") = studentName;
rs("studentNumber") = studentNumber;
rs("password") = password;
rs("contact") = contact;
rs.update;
Response.Write("1");
}
catch(e)
{
Response.Write("0");//返回0说明错在增加
}
%>
也可以把代码做进一步的改进，使得用户在准备输入密码时及调用ajax判断是否已经重复。
------------------------------------------------
Felix原创，转载请注明出处，感谢博客园！
posted on 2009-06-24 11:19 Felix Fang 阅读(330) 评论(0) 编辑 收藏 举报
