检查手机号是否存在时,后端返回"0"代表已存在,返回"1"代表可以注册。
注册时,后端返回"0"代表注册失败,返回"1"代表注册成功。
实体类
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
uphone = db.Column(db.String(11))
html/demo.html
<p>
<input type="text" id="uphone" onblur="showPhone()">
<span id="uphone-show"></span>
</p>
<p>
<input type="button" value="注册" onclick="btnReg()">
</p>
javascript/demo.html
<script src="/static/js/common.js"></script>
<script src="/static/js/jquery-1.11.3.js"></script>
<script>
/**
* 向后端发送请求判断电话是否存在并得到结果
* */
function checkPhone() {
var result = null;
xhr = createXhr();
xhr.open('get', '/check?uphone='+$("#uphone").val(), false);
xhr.onreadystatechange = function () {
if(xhr.readyState==4 && xhr.status==200){
if(xhr.responseText == "0"){
result = false;
}else{
result = true;
}
}
};
xhr.send(null);
return result;
}
/**
* 输入完成后,调用checkPhone()得到结果,并给出对应的提示到网页上
* */
function showPhone(){
if(checkPhone()){
$("#uphone-show").html("可以注册");
}else{
$("#uphone-show").html("电话号码已经存在");
}
}
/**
* 点击注册后,调用checkPhone()得到结果,并给出对应的提示到网页上
* */
function btnReg() {
if(checkPhone()){
var xhr = createXhr();
xhr.open('post', '/register', true);
xhr.onreadystatechange = function () {
if(xhr.readyState==4 && xhr.status==200){
if(xhr.responseText == "1"){
alert("注册成功");
}else{
alert("注册失败");
}
}
};
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("uphone="+$("#uphone").val());
}else{
alert("请检查填写的信息是否正确!");
}
}
</script>
javascript/common.js
function createXhr(){
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}else{
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
视图
@main.route('/')
def index():
return render_template('demo.html')
@main.route('/check')
def check():
uphone = request.args['uphone']
user = User.query.filter_by(uphone=uphone).first()
if user:
return "0"
else:
return "1"
@main.route('/register', methods=["POST"])
def register():
user = User()
user.uphone = request.form['uphone']
try:
db.session.add(user)
db.session.commit()
return "1"
except Exception as e:
print(e)
return "0"