Django与Ajax

时间  2019-12-02
标签 django ajax 栏目 Python 繁體版
原文   原文链接

目录css

Ajax简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即便用Javascript语言与服务器进行异步交互，传输的数据为XML（固然，传输的数据不仅是XML）。html

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

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

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

  • 同步交互：客户端发出一个请求后，须要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就能够发出第二个请求。

Ajax基本语法结构

$.ajax({
    代码块
})

使用Ajax的例子，页面输入两个整数，在不刷新浏览器的状况下传输到后端计算出结果ajax

urls.py：
url(r'^ajax_test/', views.ajax_test),
views.py：
from django.shortcuts import render,HttpResponse
# Create your views here.
def ajax_test(request):
    if request.method == 'POST':
        d1 = request.POST.get('d1')
        d2 = request.POST.get('d2')
        d3 = int(d1) + int(d2)
        return HttpResponse(d3)
    return render(request,'ajax_test.html')
ajax_test.html：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</head>
<body>

<input type="text" id="d1"> + <input type="text" id="d2"> =
<input type="text" id="d3">
<button id="d4">点我发送ajax数据</button>

<script>
    // 重点
    $('#d4').click(function () {
        $.ajax({
            url:'', //数据提交的后端地址，跟form表单的action参数同样
            type:'post', //提交方式为post，默认也是get请求
            data:{'d1':$('#d1').val(),'d2':$('#d2').val()}, //提交的数据
            success:function (data) {       //形参data就是异步提交给后端，后端经过计算返回的结果，回调函数
                $('#d3').val(data)      // 回调以后作的事情，设置值。
            }
        })
    })
</script>
</body>
</html>

若是使用了ajax，视图层的三板斧都不会再与前端页面交互，而是与回调函数的形参data交互。数据库

先后端传输的编码格式

发送请求的前端标签

咱们所学过的向后端发送请求的前端标签都有哪些？django

  • a标签： get请求，get请求也能够携带参数，?xxx=111&yyy=222
  • form表单：get/post请求
  • ajax：get/post请求

针对这些前端发送post请求的咱们来研究一下它们的数据在前端的编码格式：编程

前端交互是一个数据编码格式，针对不一样的数据，后端会进行不一样的处理。json

好比说django后端有

  • request.POST
  • request.FILES

那么为何只要是POST请求，就会交给request.POST进行处理，若是是文件请求，就会交给request.FILES进行处理，咱们带着这些疑问来往下看。

前端三种数据格式

在前端呐，有三种数据格式：

  1. urlencoded
  2. formdata
  3. application/json

针对上面所学过的向后端发送请求的前端标签来看

form表单发送三种数据格式的状况

form表单只可以发送两种数据格式的数据：1和2

1.form表单post请求默认的编码格式是urlencoded

在浏览器-->检查-->network能够看到，咱们form表单在提交数据的时候，有以下信息

Request Headers：    # 请求头
Content-Type:application/x-www-form-urlencoded; charset=UTF-8   # 数据编码格式-urlencoded

Form Data：# 携带的数据
d1=232323&d2=23232132

在咱们后端django中针对urlencoded数据，会自动解析并封装到request.POST方法中。

2.form表单若是发送文件

Request Headers：    # 请求头
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryhjKCHQHDmcE62iMQ  # 数据编码格式，-form-data

Form Data：#针对form-data格式的数据，在浏览器是没法查看的。

发送到后端django，文件对象会自动解析到 request.POST 和 request.FILES 中，前者记录文件名，后者记录对象。

3.form表单没法发送json格式的数据，若是发的话，只能借助于ajax

ajax三种编码格式都可以发送

ajax可以发送三种数据格式的数据：一、2和3

1.ajax默认的编码格式也是urlencoded，django后端也是将数据封装到request.POST中

那么咱们刚才看了form表单发送这些默认编码格式的数据，还有一个发送json格式的须要借助于ajax，请继续往下看

2.Ajax传输json格式数据

urls.py：
url(r'^form_test/', views.form_test),
views.py：
def form_test(request):
    if request.method == "POST":
        print(request.body)
        json_bytes = request.body
        print(json.loads(json_bytes),type(json.loads(json_bytes)))
        # 反序列化为python字典格式
    return render(request,'form_test.html')

打印结果：
b'{"username":"qinyj","pwd":123}'   # request.body
{'username': 'qinyj', 'pwd': 123} <class 'dict'>    # 反序列化以后的
form_test.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</head>
<body>

<form action="" method="post">

    username: <input type="text" name="username" id="d1">
    password: <input type="text" name="password" id="d2">
    # 这里不要用form表单的提交，为何呢，由于form表单提交的默认数据编码格式是urlencoded，也会将json格式的数据封装到后端request.body中
</form>
<button id="d3">点我发送json格式</button>

<script>
    $('#d3').click(function () {
        $.ajax({
            url:'',
            type:'post',
            contentType:'application/json', //须要指定编码格式为json
            data:JSON.stringify({'d1':$('#d1').val(),'d2':$('#d2').val()}), // 须要前端发送JSON字符串，JSON。stringify序列化便可。
            success:function (data) {
                alert(123)      // 此弹框仅仅演示，没有任何用户
            }
        })
    })
</script>
</body>
</html>

django后端针对前端json格式的数据，不会作任何处理，数据怎么来的，原封不动的封装到request.body中（基于网络传输二进制的json字符串），须要本身处理格式

3.Ajax传输文件数据

views.py：

def form_test(request):
    if request.method == "POST":
        print(request.POST)
        print(request.FILES)
        # 前端上传文件以后打印结果
        # < QueryDict: {'username': ['qinyj']} >
        # < MultiValueDict: {'myfile': [ < InMemoryUploadedFile: Devops工具链.png(image / png) >]} >
    return render(request,'form_test.html')
form_test.html：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</head>
<body>

<form action="">
    file: <input type="file" name="file" id="d1">
</form>
<button id="d4">点我发送文件格式的数据</button>

<script>
    $('#d4').click(function () {
        // 先生成一个内置对象
        var MyFormData = new FormData();
        // 添加普通的键值对
        MyFormData.append('username','qinyj');
        // 添加文件数据
        MyFormData.append('myfile',$('#d1')[0].files[0]);

        $.ajax({
            url:'',
            type:'post',
            data:MyFormData,
            // 发送文件必需要指定的两个参数
            contentType:false,  // 不适用任何编码，MyFormData对象内部自带编码，django后端可以识别。
            processData:false,  // 不处理任何数据
            success:function (data) {

            }
        })
    })
</script>
</body>
</html>

django 可以识别前端ajax发送过来的文件对象，并放入对应的方法中request.FILE去解析。

序列化的概念

在前端分离的场景下，发送给前端json格式的字符串形式，再写上说明文档，方便数据交互

咱们能够手动在后端将数据转成json字符串格式，django很是友好，帮咱们想到了这一点，须要借助一个模块来完成。

from django.core import serializers

urls.py：
url(r'^get_data/', views.get_data),
views.py：

# 须要导入模块
from django.core import serializers
from app01 import models

def get_data(request):
    # 从数据库中查出来全部的信息，
    # 序列化目的，将数据整合成一个大字典形式，
    user_querset = models.User.objects.all()
    res = serializers.serialize('json',user_querset)
    return HttpResponse(res)

# 前端页面接收到的json数据：
[{"model": "app01.user", "pk": 1, "fields": {"username": "qinyj", "password": 123, "gender": 1}}, {"model": "app01.user", "pk": 2, "fields": {"username": "jack", "password": 123, "gender": 2}}]

Ajax常见应用场景

搜索框中根据用户输入的关键字，自动提示检索关键字

用户的注册时候的查重

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程