1. 预备知识:
    什么是Json?
  2.  
  3. 定义:json是一种轻量级的数据交换格式。
    如果我们要在不同的编程语言中传递对象,就必须把对象序列化为标准格式,比如XML,但那是以往的时代,现在大多数使用序列化为json,因为json本身就是一个字符串,层次清晰,易阅读可以被所有语言读取,也方便的存储到磁盘和网络传输。
    格式:一个无序的key:value集合。{"k1":"v1","k2":"v2"}
  4.  
  5. 在程序运行过程中。所有的变量都是存在内存中。一旦程序结束,变量也会被销毁。
    所以:
    序列化:我们把变量从内存中变成可存储或者可传输的过程称为序列化
    反序列化:把变量内容从序列化的对象重新读取到内存里称为反序列化
  6.  
  7. js里面有两个常用方法实现json字符串和json对象互转
  8.  
  9. json对象---json字符串
    JSON.stringify():
    console.log(JSON.stringify({'name':'xjm'));
  10.  
  11. json字符串---js对象
    JSON.parse()
    console.log(JSON.parse('{"name":"xjm})');
    注意:
    json对象属性名必须是双引号
    不能使用undefined;
    不能是函数和日期对象
  1. Ajax
    ajax:翻译成中文就是异步JavaScriptXML。就是使用JavaScript语言与服务器进行异步交互,传输的数据为xml,当然现在不只是xml,更多的是使用Json数据
  2.  
  3. 特点:
    异步交互:客户端发出一个请求后,无需等服务器响应结束,就可以发出第二个请求
    局部刷新:给用户的感受是在不知不觉中完成请求和响应过程,无需刷新整个页面
  1. 场景:
    注册的错误提示:该用户已注册、该用户名已被使用等
    百度等搜索引擎的输入框提示:输入一个python关键词后会出现一个下拉列表,这里用到了ajax技术,当输入框输入变化时,浏览器会偷偷向服务器发送一个请求,然后接收响应显示。
  1. 基于JqueryAjax实现
  1. <button class="send_Ajax">send_Ajax</button>
  2. <script>
  3.  
  4. $(".send_Ajax").click(function(){
  5.  
  6. $.ajax({
  7. url:"/handle_Ajax/",
  8. type:"POST",
  9. data:{username:"Yuan",password:},
  10. success:function(data){
  11. console.log(data)
  12. },
  13. error: function (jqXHR, textStatus, err) {
  14. console.log(arguments);
  15. },
  16.  
  17. complete: function (jqXHR, textStatus) {
  18. console.log(textStatus);
  19. },
  20.  
  21. statusCode: {
  22. '': function (jqXHR, textStatus, err) {
  23. console.log(arguments);
  24. },
  25.  
  26. '': function (jqXHR, textStatus, err) {
  27. console.log(arguments);
  28. }
  29. }
  30. })
  31. })
  32. </script>
  1. $.ajax()参数
  2.  
  3. 请求参数:
    url:请求路径
    type:请求类型,默认get
    data:{a:1,b:2} ajax默认get请求 默认urlencoded编码类型提交数据 /?a=1&b=2
    processData:声明当前的data数据是否进行转码或预处理 默认True
    contentType:发送数据时的编码类型
      
  1.   请求头ContentType
      是指请求体的编码类型,常见的有三种:
  2.  
  3.     1application/x-www-form-urlencoded
  4.  
  5.   最常见的post提交数据的方式,form表单如果不设置enctype属性,那么默认就是这种方式提交

  1.    POST http://www.123@qq.com HTTP:/1.1
       Content-Type:application/x-www-form-urlencoded;charset=utf-8
  2. username=jzy&age=22
       2 、multipart/form-data
       这也是一个常见的post提交数据的方式。我们使用表单上传文件时,必须在form中添加enctype=multipart/form-data/
  3.   Content-Disposition: form-data; name="file"; filename="chrome.png"
       Content-Type: image/png
  4.   3application/json
      这个作为响应头大家应该不陌生,但是现在越来越多的人把它作为请求头。用来告诉服务端消息主体是序列化后的json字符串。
  1. 响应参数:
    dataType:预期服务端返回的数据类型,服务端返回的数据会根据这个值解析后,传递给回调函数。
  1. csrf跨站请求伪造
  1. data:{
  2. "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();
  3. }
  4.  
  5. $.ajax({
  6. headers:{"X-CSRFToken":$.cookie('csrftoken')}
  7. })
  1. 基于form表单的文件上传
  1. 模板部分:
  2. <form action="" method="post" enctype="multipart/form-data">
  3. 用户名 <input type="text" name="user">
  4. 头像 <input type="file" name="avatar">
  5. <input type="submit">
  6. </form>
  7. 视图部分:
  8. def index(request):
  9. print(request.body) # 原始的请求体数据
  10. print(request.GET) # GET请求数据
  11. print(request.POST) # POST请求数据
  12. print(request.FILES) # 上传的文件数据
  13.  
  14. return render(request,"index.html")
  1. 基于Ajax的文件上传
  1. 模版部分
  2. <h3>基于Ajax文件上传</h3>
  3. <form>
  4. 用户名:<input type="text" id="user">
  5. 密码:<input type="password" id="pwd">
  6. <p>头像:<input type="file" id="head_imgurl"></p>
  7. <!--input type类型一定不能是submit-->
  8. <input type="button" value="Json" class="json按钮">
  9. <input type="button" value="Ajax" class="ajax按钮">
  10. </form>
  11.  
  12. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  13. <script>
  14.  
  15. //发送json数据
  16. $('.json').click(function () {
  17. $.ajax({
  18. url: '',
  19. type: 'post',
  20. contentType: 'application/json',
  21. data: JSON.stringify({
  22. a: ,
  23. b:
  24. }),
  25. success: function (data) {
  26. console.log(data)
  27. }
  28. })
  29. });
  30.  
  31. //ajax文件上传
  32. $('.ajax').click(function () {
  33. var formdata=new FormData();
  34. formdata.append("user",$('#user').val());
  35. formdata.append("pwd",$('#pwd').val());
  36. formdata.append("head_imgurl",$('#head_imgurl')[].files[])
  37. $.ajax({
  38. url:'',
  39. type:'post',
  40. contentType:false, // 不设置内容类型
  41. processData:false, // 不处理数据
  42. data:formdata,
  43. success:function (data) {
  44. console.log(data);
  45. }
  46. })
  47. })
  48. </script>
  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 json
  57. # print(json.loads(data).get('a'))
  58. # print(json.loads(data).get('b'))
  59.  
  60. # user = request.POST.get('user')
  61.  
  62. # 获取文件对象
  63. file_obj = request.FILES.get('head_imgurl')
  64.  
  65. # 文件名称:file_obj.name
  66. with open(file_obj.name,'wb') as f:
  67. for line in file_obj:
  68. f.write(line)
  69. return HttpResponse('ok')
  70.  
  71. return render(request,'file_put.html')

010---Django与Ajax的更多相关文章

  1. python Django之Ajax

    python Django之Ajax AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案. 异步 ...

  2. django 接受 ajax 传来的数组对象

    django 接受 ajax 传来的数组对象 发送:ajax 通过 POST 方式传来一个数组 接收:django 接受方式 array = request.POST.getlist(‘key[]’) ...

  3. python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  4. Django使用AJAX调用自己写的API接口

    Django使用AJAX调用自己写的API接口 *** 具体代码和数据已上传到github https://github.com/PythonerKK/eleme-api-by-django-rest ...

  5. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  6. Django之Ajax提交

    Ajax 提交数据,页面不刷新 Ajax要引入jQuery Django之Ajax提交 Js实现页面的跳转: location.href = "/url/" $ajax({ url ...

  7. Django框架第九篇--Django和Ajax、序列化组件(serializers)、自定义分页器、模型表choice参数

    Django和Ajax 一.什么是Ajax AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”.即使用Javascript语 ...

  8. Django之AJAX传输JSON数据

    目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...

  9. Django之ajax(jquery)封装(包含 将 csrftoken 写入请求头方法)

    由于支持问题,未使用 es6 语法 _ajax.js /** * 发起请求 * @param url 请求地址 * @param data 请求数据 { } json格式 * @param type ...

  10. Django学习——图书管理系统图书修改、orm常用和非常用字段(了解)、 orm字段参数(了解)、字段关系(了解)、手动创建第三张表、Meta元信息、原生SQL、Django与ajax(入门)

    1 图书管理系统图书修改 1.1 views 修改图书获取id的两种方案 1 <input type="hidden" name="id" value=& ...

随机推荐

  1. fiddler filters 使用(fiddler只显示指定请求,fiddler不显示指定请求,即filter请求过滤)(转)

    fiddler filters 使用(fiddler只显示指定请求,fiddler不显示指定请求,即filter请求过滤) Fiddler 有一个filters可以很好的帮助我们只显示我们关系的请求或 ...

  2. Android Recyclerview隐藏item的所在区域显示大空白问题的解决方案

    最近搞了下Recyclerview,做了增加.删除item的功能.item上方有卡签 插个图片看下效果,点击底下的添加上去,同时,底下的item消失,这个用notifyItemInserted和not ...

  3. Java—数组和方法

    数组 声明数组 数组类型[] 数组名;or 数据类型 数组名[]; 如:int[] scores; 分配空间 数组名 = new 数据类型[数组长度];如:scores = new int[5]; 以 ...

  4. 回归JDK源代码(2)Enumeration<E>接口

    现在的Java程序员习惯使用Iterator<E>接口或者增强for循环来遍历集合.如果回到JDK 1.0,Enumeration接口则是遍历向量.哈希表的不二之选.本节就解读和翻译一下E ...

  5. 获取当前事件对象及this的用法

    js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta h ...

  6. vos套餐设置

    为实现对客户不同时段按不同费率计算,可以在vos里设置套餐, 具体案例: 1. 2.时段费率 套餐里没包含的时间段是不能打电话的 即:周一到周五       21:30—24:00    00:00- ...

  7. js从入门到精通到深入到就业

    本篇博客是我参看人家代码做的总结,个人感觉非常非常好,简单.步步深入,不用花大量时间来学完正本js,只需要把其中的代码理解透彻,上班无压力(上班无压力是指js部分,包括查看框架源代码都有很大帮助) / ...

  8. SINAMICS S120屏蔽报警

    通用的报警屏蔽方法: P2118 = 需要屏蔽的报警号 P2119 = 屏蔽的方式

  9. Sublime Text3 + Markdown + 实时预览

    Sublime Text3是一款给力的文本编辑器,通过安装插件可以编辑Markdown文本,在编辑Markdown文本的同时可以实时预览编辑效果. 安装准备: 找到菜单栏:Preferences → ...

  10. Android 中间白色渐变到看不见的线的Drawable

    用gradient <gradient android:startColor="#00ffffff" android:centerColor="#ffffff&qu ...