視圖文件:index.html
~~~
<!DOCTYPE html>
<!--
author:freeicna;
time:201700303
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax_login</title>
<script type="text/javascript" src="/static/js/cina.js"></script>
<script type="text/javascript" src="/static/js/jquery-3.1.1.min.js"></script>
<style type="text/css">
div#form{
padding-left: 450px;
background-color: #ccc;
}
h1{
padding-top: 14px;
}
div.name{
display: inline-block;
}
input#name{
display: inline-block;
margin-left: 27px;
}
input#pwd{
margin-top: 10px;
margin-left: 0px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="form">
<article><h1>
user register:
</h1></article>
</article>
<form method="post" >
<div>
<label>name:</label>
<input type="text" name="name" id="name" onblur="login.check()">
<div class="name"><p id="pw" style="color: red;"></p></div>
</div>
<div>
<label>password:</label>
<input type="text" name="pwd" id="pwd">
</div>
<button type="button" >register</button>
</form>
</div>
<div style="text-align: center;">
<aside><p>后臺異步查詢數據庫檢測用戶名是否存在</p></aside>
</div>
</body>
</html>
~~~
js文件:cina.js
~~~
var login = {
check:function(){
var name = document.getElementById('name').value;
var pwd = document.getElementById('pwd').value;
if(!name){
document.getElementById("pw").innerHTML='name is null';
return false;
}
var url = "/index/index/check";
var data = {'name':name,'pwd':pwd};
$.post(url,data,function(result){
var re = result.status;
if(re == 1){
var obj = document.getElementById('pw');
obj.style.color='red';
document.getElementById('pw').innerHTML = "";
document.getElementById("pw").innerHTML='user exist';
return false;
}else{
var obj = document.getElementById('pw');
obj.style.color='green';
document.getElementById('pw').innerHTML = "";
document.getElementById("pw").innerHTML='Available';
}
});
}
}
~~~
控制器:index.php
~~~
<?php
namespace app\index\controller;
class Index
{
public function index()
{
return view();
}
public function check()
{
// db('admin')->where('name = '.input('name')->find();
$re = db('admin')->where('name','=',input('name'))->find();
if($re['name'] == input('name')){
$re['status'] = 1;
}else{
$re['status'] = 0;
}
return $re;
}
}
~~~
