Django-Ajax组件

Ajax

Ajax简介

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

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

    Ajax特点：

• 异步
• 浏览器页面局部刷新(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

场景：

基于jquery的Ajax实现

$(".class").click(function(){      绑定事件
    $.ajax({
        url:"",
        type:"GET/post",
        data: {
        a:1,
        b:2,
        }
        success: function(res){
        响应处理
        }
    })
})

基于post请求的json请求内容格式

    Python中引入JsonResponse：

from django.http import JsonResponse

    Javascript中自定义对象({ })与json字符串的转换：

# <1> 自定义对象转换成json字符串： JSON.stringify()
# <2> json字符串转换成自定义对象： 变量名.parse()

    contentType为json的基于Ajax请求：

<input type="button" class="ajax-btn" value="submit_json">
<script>
    $('.ajax_btn').click(function(){
        $.ajax({
            url:'/put1/',
            type:'post',
            contentType:'json',
            data:JSON.stringify({
                a:1,
                b:2
            }),
            success:function(res){
                响应处理
            }
        })
    })
</script>

文件上传

请求头ContentType

    ContentType指的是请求体的编码的类型，常见的类型共有3种：

1. application/x-www-form-urlencoded

    这是最常见的POST提交数据的方式。浏览器的原生<form>表单，如里不设置enctype属性，那么最终就会以application/x-www-form-urlencoded方式提交数据。请求类似于下面这样(无关的请求头在本文中都省略掉了)：

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

user=Ethan&age=22

2. multipart/form-data

    这是一常见的POST数据提交方式。在使用表单上传文件时，必须让<form>表单的enctype等于multipart/form-data。

    这种方式一般用来上传文件，各大服务端语言对它也有着良好的支持

    看如下请求示例：

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"

Ethan
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

    这个例子稍微复杂点：

• 首先生成了一个boundary用于分割不同的字段，为了避免与正文内容重复，boundary很长很复杂。
• 然后Content-Type里指明了数据是以multipart/form-data来编码，本次请求的boundary是什么内容。
• 消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以—boundary开始，紧接着是内容描述信息，然后是回车，最后是字段具体内容(文本或二进制)
• 如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以—boundary—标示结束。

    关于multipart/form-data详细定义，可参考rfc 1867

    以上提到的两种POST数据的方式，都是浏览器原生支持的，而且现阶段标准中原生<form>表单也只支持这两种方式(通过<form>元素的enctype属性指定，默认为application/x-www-form-urlencoded。其实还支持text/plain，不过用得非常少)

3. application/json

    现在越来越多的人把application/json作为请求头，用来告诉服务端消息主体是序列化后的JSON字符串。由于JSON规范的流行，除了低版本IE之外的各大浏览器都原生支持JSON.stringify，服务端语言也都有处理JSON的函数，使用JSON不会遇上什么麻烦。JSON格式支持比键值对复杂的多的结构化数据。 

基于form表单的文件上传

模板部分

<form action="/put/", method="post", enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="user">
    <input type="file" name="file">
    <input type="submit">
</form>

视图部分

def put(request):
    file_obj = request.FILES.get("file")
    name = file_obj.name
    with open("", "wb") as f_w:
        for line in file_obj:
            f_w.write(line)
    return HttpResponse("上传成功")

基于Ajax的文件上传

<div>
    {% csrf_taken %}
    <input type="text" class="user">
    <input type="file" class="file">
    <input type="button" value="submit" class="ajax_btn">
</div>
<script>
    $(".ajax_btn").click(function(){
        let formdata = new FormData();
        formdata.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val())
        formdata.append("user", $(".user").val());
        formdata.append("file", $(".file")[0].files[0]);
        $.ajax({
            url: "/put/",
            type: "post",
            contentType: false,    // 不设置内容类型
            processData: false,    // 不处理数据
            data: formdata,
            success: function(res){
                响应内容
            }
        })
    })
</script>

应用

1. 用户名是否已被注册

    在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已被注册过，返回false表示没有注册过。客户端得到服务器返回的结果后，确定是否在用户名文本框后显示"用户名已被注册"的错误信息。

2. 基于Ajax进行登录验证

    用户在表单输入用户名与密码，通过Ajax提交给服务器，服务器验证后返回响应信息，客户端通过响应信息确定是否登录成功，成功，则跳转到首页，否则，在页面上显示相应的错误信息。