thinkPHP5——ajax异步刷新之注册（转载自 angryshan）

文件结构：

1.HTML文件代码：

<!--html文件的主要代码-->
用户
<div>
<input type="text" id="username" name="username" onblur="register_name()">
</div>
<div><span id="check1" style="color: red"></span></div>

2.js文件代码

//js文件主要代码，此为原生js代码
function register_name(){
var username=document.getElementById("username").value;//获取值
if(username==''){
document.getElementById('check1').innerHTML='不能为空';
return false;
}
var ajaxObj =new XMLHttpRequest();
ajaxObj.onreadystatechange=function(){
if (ajaxObj.readyState==4){
document.getElementById('check1').innerHTML = ajaxObj.responseText;
}
}
ajaxObj.open('get','../register/check?username='+username);
ajaxObj.send(null);
}

js用JQ简化过的代码

//此为jq简化过的js主要代码，必须在HTML文件加
//<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
function register_name(){
//var username=document.getElementById("username").value;
var username=$('#username').val();
var check1=$("#check1");
if(username==''){
// document.getElementById('check1').innerHTML='不能为空';
//$("#check1").html('不能为空');
check1.html('不能为空');
return false;
}
/*var ajaxObj =new XMLHttpRequest();
ajaxObj.onreadystatechange=function(){
if (ajaxObj.readyState==4){
//document.getElementById('check1').innerHTML = ajaxObj.responseText;
check1.html(ajaxObj.responseText);
}
}
ajaxObj.open('get','../register/check?username='+username);
ajaxObj.send(null);*/

else {
$.get({url:('../register/check.html')},{"username":name},function(data){
check1.html(data);
});
}
}

3.控制器的主要代码

//PHP控制器内的主要代码
public function check(){
$username=input('username');
$info=db('member')
->where('username','=',$username)
->find();
if(empty($info)){
echo"ok";
}
else{
echo "用户名已存在";
}
exit;
}

转载自 angryshan，原文链接

• 点赞
• 收藏
• 分享
• 文章举报