前端页面可以通过ajax 请求， 实现在不刷新页面的情况下，对当前页面局部数据进行更新。下面，我们来学习一下ajax .
ajax是什么
ajax是异步jscript脚本的意思a表示异步j表示jscriptx表示xml因为普通页面刷新一次必须向服务器请求全部的页面;如果使用异步请求,每次可以向服务器请求很少量的需要更新的数据,这样可以减轻服务器的负担,并且可以让web页面有应用程序的效果和相应特征,给用户更好的体验
用Flask加 Jquery 的方式举例说明一下使用
需求： 实现对手机号码的唯一性校验
实现方式 ajax
模板
{% block newcontent %}
<h1>用户注册</h1>
<form class="form-horizontal" action="{{ url_for( "user.register") }}" method="post">
<div class="form-group">
<label for="inputUsername" class="col-md-2 control-label col-md-offset-1">用户名</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputUsername" placeholder="username" name="username">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-md-2 control-label col-md-offset-1">密码</label>
<div class="col-md-6">
<input type="password" class="form-control" id="inputPassword" placeholder="password"
name="password">
</div>
</div>
<div class="form-group">
<label for="inputConfirm" class="col-md-2 control-label col-md-offset-1 ">确认密码</label>
<div class="col-md-6">
<input type="password" class="form-control" id="inputConfirm" placeholder="confirm password"
name="repassword">
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-md-2 control-label col-md-offset-1">手机号码</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputPhone" placeholder="phone number" name="phone">
{# 这个span用来显示 阿贾克斯返回的手机唯一性校验 #}
<span></span>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-md-2 control-label col-md-offset-1">邮箱</label>
<div class="col-md-6">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" name="email">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-10">
<button type="submit" class="btn btn-primary col-md-3">注 册
</button>
<button type="reset" class="btn btn-primary col-md-3 col-md-offset-1">重 置</button>
</div>
</div>
</form>
{% endblock %}
{#添加js脚本 #}
{% block scripts %}
{{ super() }}
<script>
{# blur 是输入框，鼠标离开后触发 #}
$('#inputPhone').blur( function() {
let phone=$(this).val();
{#当前元素的下一个元素#}
let span_ele = $(this).next('span');
if (phone.length ==11){
{#jquery的 ajax用法， 参数一url, 参数二 要传递的参数， 参数三是ajax 返回的json数据#}
$.get( '{{ url_for('user.check_phone_exists') }}', {phone:phone}, function (data) {
if (data.code !=200) {
span_ele.css({"color": "#ff0011", "font-size": "12px"});
span_ele.text(data.msg)
}
else {
span_ele.css({"color": "blueviolet", "font-size": "12px"});
span_ele.text(data.msg)
}
} )
}
else {
span_ele.css({"color": "#ff0011", "font-size": "12px"});
span_ele.text('手机格式错误')
}
})
</script>视图函数
# 用于做手机号码的唯一性校验，通过阿贾克斯方式
@user_bp.route('/user/check_phone')
def check_phone_exists():
phone = request.args.get('phone')
user = User.query.filter(User.phone == phone).all()
print("--------------------")
print(user)
# code: 400 不能用 200 可以用
if len(user) > 0:
return jsonify(code=400, msg='此号码已被注册')
else:
# print("看看这里进来了没有")
return jsonify(code=200, msg='此号码可用')
jquery 语法
{#添加js脚本 #}
{% block scripts %}
{{ super() }}
<script>
{# blur 是输入框，鼠标离开后触发 #}
$('#inputPhone').blur( function() {
let phone=$(this).val();
{#当前元素的下一个元素#}
let span_ele = $(this).next('span');
if (phone.length ==11){
{#jquery的 ajax用法， 参数一url, 参数二 要传递的参数， 参数三是ajax 返回的json数据#}
$.get( '{{ url_for('user.check_phone_exists') }}', {phone:phone}, function (data) {
if (data.code !=200) {
span_ele.css({"color": "#ff0011", "font-size": "12px"});
span_ele.text(data.msg)
}
else {
span_ele.css({"color": "blueviolet", "font-size": "12px"});
span_ele.text(data.msg)
}
} )
}
else {
span_ele.css({"color": "#ff0011", "font-size": "12px"});
span_ele.text('手机格式错误')
}
})
</script>
实现效果
