Django + Ajax交互
什么是ajax:
W3school给出的解释
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
我的理解是当前端页面需要和后台进行数据交互的时候,但是又不想刷新整个页面来接受服务器的响应,这时候就用到ajax技术
典型的应用场景:
1.用户名注册的时候,验证该用户名是否被注册
2.当用户进行登录的时候,自动将注册过的用户的头像显示出来,类似qq登录的时候
3.输入验证码,用户点击看不清换一张的情况下
总之,使用ajax可以使网页实现异步更新
Django和Ajax的交互
定义和用法
get() 方法通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
$(selector).get(url,data,success(response,status,xhr),dataType)
该函数是简写的Ajax函数等同于:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
参数解释:
url | 必需。规定将请求发送的哪个 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
success(response,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数:
|
dataType | 可选。规定预计的服务器响应的数据类型。 默认地,jQuery 将智能判断。 可能的类型:
|
前段代码如下
<form action="/regist" method="post">
{% csrf_token %}
<p>
用户名称
<input type="text" name="uname" id="uname">
</p>
<p id="msg"></p>
<p>
用户密码
<input type="password" name="upwd" id="upwd">
</p>
</form>
以下是js代码(只写了和交互相关的js代码,在实际应用中应该引入jquery.js文件
)
<script>
$(function () {
var input_uname = $("#uname");
var msg = $("#msg");
input_uname.blur(function () {
uname = input_uname.val();
if(uname == ''){
return;
}
$.get('/check', {'uname':uname}, function (result) {
msg.text(result);
});
});
})
</script
后端代码的实现
1.在urls.py中配置路由
urlpatterns += [(r"/check", check_views )]
2.在views.py中处理
def check_views(resquest):
username = request.GET['uname']
user = UserInfo.objects.filter(uname=username)
if user:
return HttpResponse('用户名已存在')
return HttpResponse('用户名可用')