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('用户名可用')