Django + Ajax交互

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)

可选。规定当请求成功时运行的函数。

额外的参数:

  • response - 包含来自请求的结果数据
  • status - 包含请求的状态
  • xhr - 包含 XMLHttpRequest 对象
dataType

可选。规定预计的服务器响应的数据类型。

默认地,jQuery 将智能判断。

可能的类型:

  • "xml"
  • "html"
  • "text"
  • "script"
  • "json"
  • "jsonp"


前段代码如下
<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('用户名可用')
在django中get和filter的区别:
get:从数据库中取得一个匹配的数据,如果不存在,则会报错,可以用异常处理
filter:从数据库中查找符合条件的数据,返回一个列表,如果不存在,返回[]

猜你喜欢

转载自blog.csdn.net/qq_38111600/article/details/79550809