Django与Ajax

佚名 6年前 (2018-11-19) Python 1238人围观抢沙发百度已收录

一.Ajax

ajax(Asynchronous Javascript And XML)翻译成中午就是"异步JavaScritp和XML"。即是使用JavaScript语言与服务器进行异步交互,传输的数据为XML(现在更多使用json数据)。
ajax就是一种前后端数据交互的方式
特点:
    1.异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求
    2.局部刷新

基本用法:

$.ajax({
    url:'/index/',                  指定路径
    type:'post',                    指定请求方式
    data:{'name':'Yven','age':18},  往后台提交的数据
    success:function (data) {       成功时回调该函数
        console.log(data)
    }
})

二.上传文件

请求头ContentType

1.application/x-www-form-urlencoded

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

这是最常见的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=yven&&age=18

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"

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

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

3.application/json

application/json这个Content-Type作为响应头大家肯定不陌生。这也是越来越流行的一种请求头,用来告诉服务端消息主体是序列化后的JSON字符串,由于JSON规范的流行,除了低版本IE之外的各大浏览器都原生支持JSON.stringify,服务端语言也都有处理JSON的函数,使用JSON不会有书名麻烦。
JSON格式支持比键值对复杂的多的结构化数据,这一点也很有用,

基于Ajax上传文件

<form>
    <input type="file" name="files" class="files">
</form>
<button class="btn" type="submit">提交</button>
</body>
<script>
    $('.btn').click(function () {
        var formdata = new FormData();
        formdata.append('files', $('.files')[0].files[0]);
        $.ajax({
            url: '',
            type: 'post',
            // 不预处理数据
            contentType:false,
            // 指定往后台传数据的编码格式
            // 告诉jQuery不要去设置Content-Type请求头
            processData:false,
            data: formdata,
            success: function (data) {
                alert(data)
            }
        })
    })
</script>

三.Ajax提交json格式数据

模板层

<script src="/static/bootstrap-3.3.7-dist/js/jquery-3.3.1.js"></script>
<script>
    $('.btn').click(function () {
        var data = {'name':$('#name').val(),'pwd':$('#password').val()};
        {#console.log(typeof data);#}
        var post_data = JSON.stringify(data)
        $.ajax({
            url:'/json_login/',
            type:'post',
            data:post_data,
            contentType:'application/json',
            success:function (data) {
                if (data.user){
                    window.location = 'https://www.baidu.com'
                }else {
                    alert(data.msg)
                }
            }
        });
    });
</script>

试图层

if request.method == 'GET':
    return render(request,'json_login.html')
data = request.body
import json
res = json.loads(data.decode('utf-8'))
name = res['name']
pwd = res['pwd']
dic = {'user':None,'msg':None}
try:
    user = models.User.objects.get(name=name)
    if user.password == pwd:
        dic['user'] = 1
        dic['msg'] = '登录成功'
    else:
        dic['msg'] = '密码错误'
    return JsonResponse(dic)
except:
    dic['msg'] = '用户名不存在'
    return JsonResponse(dic)

四.Django内置的serializers

from django.core import serializers
# serializers把对象序列化成json字符串

def test(request):
    book = Book.objects.all()
    res = sserializers.serialize('json',book)
    return HttpResponse(res)