<script type="text/javascript"> function yzmUpdate(){ document.yzm.src="yzm.php?"+Math.random(); } function createXML(){ var xml=false; if(window.ActiveXObject){ try{xml=new ActiveXObject("Msxml2.xmlhttp")} catch(e){ try{xml=new ActiveXObject("Microsoft.xmlhttp")} catch(e){xml=false;} } } else if(window.XMLHttpRequest){ xml=new XMLHttpRequest(); } return xml; } function check(){ var User_name_text=document.getElementById('User_name'); var User_name=User_name_text.value; var xml=createXML(); var postStr="User_name="+User_name; xml.open('POST','check.php',true); xml.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf8"); xml.send(postStr); xml.onreadystatechange=function(){ if(xml.readyState==4 && xml.status==200){ var res=xml.responseText; if(res!=""){ alert(res); } } } } </script>按照下述要求完成代码输入账号离开User_name文本框时,使用Ajax对账号进行查重操作,若账号重复,则弹出消息框显示提示信息(如下图所示)。
时间: 2024-03-27 07:35:35 浏览: 103
这段代码是一个 JavaScript 脚本,主要实现了以下功能:
1. 定义了一个函数 yzmUpdate,用于更新验证码图片的 src 属性,实现验证码的动态刷新;
2. 定义了一个函数 createXML,用于创建 XMLHttpRequest 对象,实现 Ajax 请求;
3. 定义了一个函数 check,用于检查账号是否重复,并在重复时弹出提示框。
具体实现细节如下:
1. 在 HTML 中,需要有一个文本框和一个按钮,用于输入账号和触发检查操作。文本框的 id 应该为 User_name。
2. 在文本框的 onblur 事件中,调用 check 函数进行账号查重。
3. check 函数中,首先获取文本框中输入的账号,然后创建 XMLHttpRequest 对象,发送 POST 请求到 check.php 页面,传递账号参数。
4. check.php 页面接收账号参数,查询数据库是否存在该账号,如果存在则返回提示信息。
5. 在 check 函数中,通过 XMLHttpRequest 对象的 onreadystatechange 事件处理函数,监测响应状态和响应文本,如果检查到重复账号,则弹出提示框显示提示信息。
完整代码如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>账号查重</title>
<script type="text/javascript">
function yzmUpdate() {
document.yzm.src = "yzm.php?" + Math.random();
}
function createXML() {
var xml = false;
if (window.ActiveXObject) {
try {
xml = new ActiveXObject("Msxml2.xmlhttp");
} catch (e) {
try {
xml = new ActiveXObject("Microsoft.xmlhttp");
} catch (e) {
xml = false;
}
}
} else if (window.XMLHttpRequest) {
xml = new XMLHttpRequest();
}
return xml;
}
function check() {
var User_name_text = document.getElementById('User_name');
var User_name = User_name_text.value;
var xml = createXML();
var postStr = "User_name=" + User_name;
xml.open('POST', 'check.php', true);
xml.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=utf8");
xml.send(postStr);
xml.onreadystatechange = function() {
if (xml.readyState == 4 && xml.status == 200) {
var res = xml.responseText;
if (res != "") {
alert(res);
}
}
}
}
</script>
</head>
<body>
<label>账号:</label>
<input type="text" id="User_name" onblur="check()">
<button onclick="yzmUpdate()">更换验证码</button>
<img src="yzm.php" alt="验证码" name="yzm">
</body>
</html>
```
请注意,这段代码仅为示例,实际应用中需要根据具体情况进行修改和完善。
阅读全文