django之ajax、文件上传、内置的serializers-64

django之ajax、文件上传、内置的serializers-64

一.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

这是最常见的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)

posted on 2018-12-27 21:40 漫天飞雪世情难却 阅读( ...) 评论( ...)   编辑 收藏

转载于:https://www.cnblogs.com/jokezl/articles/10187576.html