010---Django与Ajax-白红宇

010---Django与Ajax

阅读量：5299 次

发布时间：2019-06-14

本文共 3513 字，大约阅读时间需要 11 分钟。

预备知识：     什么是Json?     定义：json是一种轻量级的数据交换格式。         如果我们要在不同的编程语言中传递对象，就必须把对象序列化为标准格式，比如XML,但那是以往的时代，现在大多数使用序列化为json，因为json本身就是一个字符串，层次清晰，易阅读可以被所有语言读取，也方便的存储到磁盘和网络传输。     格式：一个无序的key:value集合。{"k1":"v1","k2":"v2"}     在程序运行过程中。所有的变量都是存在内存中。一旦程序结束，变量也会被销毁。     所以：         序列化：我们把变量从内存中变成可存储或者可传输的过程称为序列化         反序列化：把变量内容从序列化的对象重新读取到内存里称为反序列化     在js里面有两个常用方法实现json字符串和json对象互转     json对象---json字符串         JSON.stringify():         console.log(JSON.stringify({'name':'xjm'));     json字符串---js对象         JSON.parse()         console.log(JSON.parse('{"name":"xjm})');     注意：         json对象属性名必须是双引号         不能使用undefined;         不能是函数和日期对象

Ajax     ajax：翻译成中文就是异步JavaScript和XML。就是使用JavaScript语言与服务器进行异步交互，传输的数据为xml，当然现在不只是xml，更多的是使用Json数据     特点：         异步交互：客户端发出一个请求后，无需等服务器响应结束，就可以发出第二个请求         局部刷新：给用户的感受是在不知不觉中完成请求和响应过程，无需刷新整个页面

场景：     注册的错误提示：该用户已注册、该用户名已被使用等     百度等搜索引擎的输入框提示：输入一个python关键词后会出现一个下拉列表，这里用到了ajax技术，当输入框输入变化时，浏览器会偷偷向服务器发送一个请求，然后接收响应显示。

基于Jquery的Ajax实现

1  2

$.ajax()参数     请求参数：         url:请求路径         type:请求类型，默认get         data:{a:1,b:2}  ajax默认get请求  默认urlencoded编码类型提交数据  /?a=1&b=2         processData:声明当前的data数据是否进行转码或预处理  默认True         contentType:发送数据时的编码类型

　　请求头ContentType     　　是指请求体的编码类型，常见的有三种： 　　　　1、application/x-www-form-urlencoded     　　最常见的post提交数据的方式，form表单如果不设置enctype属性，那么默认就是这种方式提交

　　 POST http://www.123@qq.com HTTP:/1.1   　　  Content-Type:application/x-www-form-urlencoded;charset=utf-8        username=jzy&age=22 　　　2　、multipart/form-data    　　 这也是一个常见的post提交数据的方式。我们使用表单上传文件时，必须在form中添加enctype=multipart/form-data/     　　Content-Disposition: form-data; name="file"; filename="chrome.png"    　　 Content-Type: image/png 　　3、application/json     　　这个作为响应头大家应该不陌生，但是现在越来越多的人把它作为请求头。用来告诉服务端消息主体是序列化后的json字符串。

响应参数：         dataType:预期服务端返回的数据类型，服务端返回的数据会根据这个值解析后，传递给回调函数。

csrf跨站请求伪造

1     data:{2         "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();3     }4 5     $.ajax({6         headers:{
   "X-CSRFToken":$.cookie('csrftoken')}7     })

基于form表单的文件上传

模板部分：        
     
                    用户名 
                    头像 
                  
              
     
    视图部分：        def index(request):            print(request.body)   # 原始的请求体数据            print(request.GET)    # GET请求数据            print(request.POST)   # POST请求数据            print(request.FILES)  # 上传的文件数据            return render(request,"index.html")

基于Ajax的文件上传

1 模版部分 2         基于Ajax文件上传
 3         
     
       4             用户名：
       5             密码：
       6             
      头像：
 7             
       8             
       9             
      10         
     
11 12         13         49     视图部分50         def file_put(request):51             if request.method == 'POST':52                 print(request.body)  # 请求报文53                 print(request.POST)  # 只有请求头是urlencoded时，才有数据54 55                 # data = request.body.decode('utf-8')56                 # import json57                 # print(json.loads(data).get('a'))58                 # print(json.loads(data).get('b'))59 60 61                 # user = request.POST.get('user')62 63                 # 获取文件对象64                 file_obj = request.FILES.get('head_imgurl')65 66                 # 文件名称：file_obj.name67                 with open(file_obj.name,'wb') as f:68                     for line in file_obj:69                         f.write(line)70                 return HttpResponse('ok')71 72             return render(request,'file_put.html')