Ajax 使用 ajax 加上 get 和 post 方法，通过后台加载数据，并在网页上进行显示
//第一个参数，使用的什么方法。
//第二个参数 url，这里因为是 get 请求，所以 url 后面是要跟上参数的！！！
//第三个参数，同步还是异步，true 同步，false 异步,默认异步
// xhr.open("get","checkUsername.php?username="+username,true);
xhr.open("post","checkUsername.php",true);
//对于 post 请求，参数应该放到请求体当中
var param = "username=" + username
//设置 xhr 请求头信息，这个步骤仅仅是针对于 post 请求才有的！！！
xhr.setRequestHeader("Conte 《一线大厂 Java 面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 nt-type","application/x-www-form-urlencoded");
xhr.send(param);
xhr.onreadystatechange = function(){
//readyState 等于 4 代表的是 xhr 的完成相应
if(xhr.readyState == 4){
//status 等于 200，代表正常
if(xhr.status == 200){
//除了 responseText 还有 xhr.responseXML,就是不同的格式。
var result = xhr.responseText;
console.log(result);
document.getElementById("result").innerText = result;
}
}
};
};
};
</script>
</head>
<body>
<h1>注册界面</h1>
<form action="register.php" method="post">
用户名：<input type="text" name="username" id="username">
<input type="button" value="验证用户名" id="btn">
<span id="result"></span>
<br>
密码：<input type="password" name="password">
<input type="submit" name="" value="提交">
</form>
</body>
</html>
对 readyState 和 status 的解释：
另一个不变，checkUsername.php
<?php
_POST["username"];
//这里应该查询数据库，这里只是一个模拟数据库
if($username == 'zhangsan'){
echo "username exists";
}else{
echo "username OK";
}
?>
这里解释以下，第 2 步骤，准备发送阶段的 open 方法中的服务端地址如何确定，一般开发人员会提供一份接口文档,里面会详细的告诉你地址参数什么的。
[](()4.使用 Ajax 完成唯一性案例操作
==============================================================================
话不多说，直接上代码。
创作一个 register.html 文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>register</title>
<script type="text/javascript">
window.onload = function(){
var username = document.querySelector("#username");
var email = document.querySelector("#email");
var phone = document.querySelector("#phone");
//onblur,事件在对象失去焦点时发生。
username.onblur = function(){
var usernameValue = username.value;
console.log(usernameValue);
//这里比较用户名 username 和服务器数据库里面内容。
//往后使用 ajax 来实现。
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get","./server/checkUsername.php?uname="+usernameValue,true);
xhr.send(null);
xhr.onreadystatechange = function(){
if (xhr.readyState==4) {
if (xhr.status==200) {
//responseText 返回的是字符串
//responseXML 返回的是 XML 格式
var result = xhr.responseText;
console.log(result);
var username_result = document.querySelector("#username_result");
if (result == "NO") {
username_result.innerText = "user 已经注册！！";
}else{
username_result.innerText = "user 可以使用。";
}
}
}
}
};
email.onblur = function(){
var emailValue = email.value;
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post","./server/checkEmail.php",true);
var param = "e="+ emailValue;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(param);
xhr.onreadystatechange = function(){
if (xhr.readyState==4 && xhr.status==200) {
var result = xhr.responseText;
var email_result = document.querySelector("#email_result");
if (result==0) {
email_result.innerText = "邮箱可用";
}else{
email_result.innerText = "邮箱不可用";
}
}
};
};
phone.onblur = function(){
var phoneValue = phone.value;
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post","./server/checkPhone.php",true);
var param = "phonenumber="+phoneValue;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(param);
xhr.onreadystatechange = function(){
if (xhr.readyState==4) {
if (xhr.status==200) {
//xhr.responseText 是一个字符串
var result = xhr.responseText;
//如果得到的像一个字符串形式，可以把他转化为对象，方便我们获取里面的值。
resultObject = JSON.parse(result)
var phone_result = document.querySelector("#phone_result")
if (resultObject.status == 0 ) {
//代表手机号码可用
phone_result.innerText = resultObject.message.tips+","+resultObject.message.phonefrom;
}else if (resultObject.status == 1) {
//代表手机号码不可用
phone_result.innerText = resultObject.message;
}
}
}
}
};
}
</script>
</head>
<body>
<h1>注册界面</h1>
<form action="">
用户名：<input type="text" id="username"><span id="username_result"></span><br>
邮箱：<input type="text" id="email"><span id="email_result"></span><br>
手机号码：<input type="text" id="phone"><span id="phone_result"></span>
</form>
</body>
</html>
再准备三个服务器 php 文件，
checkEmail.php：
<?php
_POST["e"];
if ($email == 'xxx@qq.com') {
echo '1';
}else{
echo '0';
}
?>
checkPhone.php 文件：
<?php
_POST["phonenumber"];
if ($phone == '139') {
echo '{"status":1,"message":"手机号已经被使用"}';
}else{
echo '{"status":0,"message":{"tips":"手机号可用","phonefrom":"中国电信"}}';
}
?>
还未添加个人签名 2022.04.13 加入
还未添加个人简介
评论