Django之ajax

时间：2019-03-06 21:37:57 阅读：182 评论：0 收藏：0 [点我收藏+]

一.AJAX

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

　　　　AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

　　　　AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

　　　　　　a.同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

　　　　　　b.异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

　　AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程

二.应用场景

　　　　搜索引擎根据用户输入的关键字，自动提示检索关键字。

　　　　还有一个很重要的应用场景就是注册时候的用户名的查重。

　　　　其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

　　　　　　a.整个过程中页面没有刷新，只是刷新页面中的局部位置而已！

　　　　　　b.当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

三.AJAX基本流程实例

　　　　urls.py文件:

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    # url(r‘^admin/‘, admin.site.urls),
    url(r‘^login/‘, views.login,name=‘login‘),
]

　　　　views.py文件

from django.shortcuts import render,HttpResponse,redirect
from django.http import JsonResponse
from app01 import models
from django.urls import reverse
# Create your views here.
import json
def login(request):
    if request.method ==‘GET‘:
        return render(request,‘login.html‘)
    else:
        username = request.POST.get(‘username‘)
        password = request.POST.get(‘pwd‘)
        ret = models.UserInfo.objects.filter(name=username, password=password)
        if ret.exists():
            return HttpResponse(‘ok‘)
        else:
            return HttpResponse(‘fail‘)

　　　　html文件:

{% load static %}  #勿忘
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="{% static ‘bootstrap-3.3.7-dist/css/bootstrap.css‘ %}" rel="stylesheet">

</head>
<body>
{#    <form action="{% url ‘login‘ %}" method="post" class="form-control">#}
{#        {% csrf_token %}#}
{#        用户名: <input type="text" name="uname">#}
{#        密码: <input type="password" name="pwd">#}
{#        <input type="submit">#}
{##}
{#    </form>#}

{% csrf_token %}
用户名: <input type="text" id="username">
密码: <input type="password" id="password">
<button id="sub">登录</button>
<span id="msg" style="color: red;font-size: 12px;"></span>

<script src="{% static ‘js/jquery.js‘ %}"></script>
{#<script src="{%static ‘/js/bootstrap.min.js‘%}"></script>#}
<script>
    $(‘#sub‘).click(function () {
        var uname = $(‘#username‘).val();//从标签获取数据
        var pwd = $(‘#password‘).val();
        var csrf_token = $(‘input[name=csrfmiddlewaretoken]‘).val();
        $.ajax({
            url: "{% url ‘login‘%}",
            type: ‘post‘,
            data: {username: uname, pwd: pwd, ‘csrfmiddlewaretoken‘: csrf_token},  #与views中文件中get()的key值一一对应起来
            success: function (response) {//通过返回内容,一定进行dom操作,处理数据,例如下边的给标签写入
                console.log(response, typeof response);
                if (response === ‘ok‘) {
                    $(‘#msg‘).text(‘成功啦!‘); //给标签写入内容//
                    {#location.href = response.home_url#}  #用location方法在前端页面实现跳转

                } else {
                    $(‘#msg‘).text(‘失败了,检查一下自己输入的内容‘);
                }
            }
        })
    })
</script>

</body>
</html>

相比较form表单,此处是与事件(click)绑定在一起,然后在事件内,写ajax

四.

当请求返回的不仅仅是字符串类型,还可能是列表\字典等各种数据类型.

以字典为例(逻辑为python下的字典类型--->json字符串--->js下的自定义对象(就是js下字典));因为两种语言都有json,所以通过json作为桥梁进行转换.

例:

urlpatterns = [
    # url(r‘^admin/‘, admin.site.urls),
    url(r‘^login/‘, views.login,name=‘login‘),
    url(r‘^home/‘, views.home,name=‘home‘),
]

views.py文件

from django.shortcuts import render,HttpResponse,redirect
from django.http import JsonResponse
from app01 import models
from django.urls import reverse
# Create your views here.
import json
def home(request):
    return render(request,‘home.html‘)

def login(request):

    if request.method ==‘GET‘:
        return render(request,‘login.html‘)
    else:
        a = {‘status‘: None, ‘home_url‘: None}
        username = request.POST.get(‘username‘)
        password = request.POST.get(‘pwd‘)
        ret = models.UserInfo.objects.filter(name=username, password=password)
        if ret.exists():
            a[‘status‘] = True
            a[‘home_url‘] =reverse(‘home‘) #反向解析,获得新路径/实际意义是到html文件后,跳转新页面
            a_json = json.dumps(a)  #序列化>>json类型字符串
            return HttpResponse(a_json)  #HttpResponse返回的是字符串类型,因此返回前,将要传的数据序列化为字符串.
        else:
            a_json = json.dumps(a)  # 序列化>>json类型字符串
            return HttpResponse(a_json)

html文件

{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="{% static ‘bootstrap-3.3.7-dist/css/bootstrap.css‘ %}" rel="stylesheet">

</head>
<body>
用户名: <input type="text" id="username">
密码: <input type="password" id="password">
<button id="sub">登录</button>
<span id="msg" style="color: red;font-size: 12px;"></span>

<script src="{% static ‘js/jquery.js‘ %}"></script>
{#<script src="{%static ‘/js/bootstrap.min.js‘%}"></script>#}
<script>
    $(‘#sub‘).click(function () {
        var uname = $(‘#username‘).val();//从标签获取数据
        var pwd = $(‘#password‘).val();
        var csrf_token = $(‘input[name=csrfmiddlewaretoken]‘).val();
        $.ajax({
            url: "{% url ‘login‘%}",
            type: ‘post‘,
            data: {username: uname, pwd: pwd, ‘csrfmiddlewaretoken‘: csrf_token},
            success: function (response) {//通过返回内容,一定进行dom操作,处理数据,例如下边的给标签写入
                console.log(response, typeof response);
                response = JSON.parse(response);  #JSON反序列化
                if (response.status) {
                    $(‘#msg‘).text(‘成功啦!‘); //给标签写入内容//
                    location.href = response.home_url  #js中的自定义对象(字典)用"."

                } else {
                    $(‘#msg‘).text(‘失败了,检查一下自己输入的内容‘);
                }
            }
        })
    })
</script>

</body>
</html>

json补充:

　　　　json是独立语言,都可以通过json兼容性,去连接各种语言.

　　　　　　例如,python中的json模块,是用来加工python语言的--->转化为json语言;每个语言都有关于json的模块;所以json成为一个接口,js的json就可以把json字符串转化为js的自定义对象类型(形式就是字典)的数据.

技术分享图片

https://www.cnblogs.com/clschao/articles/10468335.html

技术分享图片

　　Django中json的序列化的简单方式:

　　　　(1) JsonResponse

　　　　　　简单的写法:https://www.cnblogs.com/clschao/articles/10409764.html#part_6

　　　　　　　　from Django.http import JsonResponse

　　　　　　给JsonResponse一个字典类型数据,JsonResponse自动将其加工成JSON类型.还有一点好处是它内部指定了content-type:applycation/json.当js拿到数据的时候,首先要分析响应头,当获取content-type:applycation/json时,它就知道数据为json类型,js就会内部自己反序列化了!!!,所以在前端拿到js的response的时候,就是js的object类型,省去了json的反序列化.

技术分享图片