一 Ajax简介

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

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

AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

优点:

  1. AJAX使用Javascript技术向服务器发送异步请求
  2. AJAX无须刷新整个页面

二 AJAX的异步请求

设计路由

  1. from django.contrib import admin
  2. from django.urls import path
  3. from app01 import views
  4. urlpatterns = [
  5. path('admin/', admin.site.urls),
  6. path('add_book/',views.add_book),
  7. path('query_book/',views.query_book),
  8. #ajax相关
  9. path('ajax_sleep/',views.ajax_sleep),
  10. path('ajax_test/',views.ajax_test),
  11. #前端页面
  12. path('ajax_temp/',views.ajax_temp),
  13. ]

views视图文件

  1. def ajax_sleep(request):
  2. import time
  3. time.sleep(3)
  4. return HttpResponse("sleep 3 senond")
  5.  
  6. def ajax_test(request):
  7. return HttpResponse("test...")
  8.  
  9. def ajax_temp(request):
  10. return render(request,"ajax_temp.html")

html文件

root@darren-virtual-machine:~/PycharmProjects/orm_demo# vim templates/ajax_temp.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <button id="btn1">ajax_sleep</button>
  9. <button id="btn2">ajax_test</button>
  10. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  11.  
  12. <script>
  13. $("#btn1").click(function () {
  14. $.ajax({
  15. url:"/ajax_sleep/",
  16. type:"GET",
  17. success:function (data) {
  18. console.log(data);
  19. }
  20. }
  21. )
  22. })
  23. $("#btn2").click(function () {
  24. $.ajax({
  25. url:"/ajax_test/",
  26. type:"GET",
  27. success:function (data) {
  28. console.log(data);
  29. }
  30. }
  31. )
  32. })
  33. </script>>
  34. </body>
  35. </html>

访问http://127.0.0.1:8000/ajax_temp/,先点击ajax_sleep然后点击test,这时在sleep中间正在执sleep代码,但是在点击test,也会执行,先于sleep输出,说明是一个异步操作,同时点击test后,页面并不会刷新,是一个局部刷新的动作

三 实现ajax的一个计算案例

制作一个如下页面,当在前面输入两个数字,点击提交触发后,会把结果填在第三个框里

设计路由

  1. from django.contrib import admin
  2. from django.urls import path
  3. from app01 import views
  4. urlpatterns = [
  5. path('admin/', admin.site.urls),
  6. path('add_book/',views.add_book),
  7. path('query_book/',views.query_book),
  8. #ajax相关
  9. path('ajax_sleep/',views.ajax_sleep),
  10. path('ajax_test/',views.ajax_test),
  11. #前端页面
  12. path('ajax_temp/',views.ajax_temp),
  13. #ajax求和
  14. path('ajax_sum/',views.ajax_sum),
  15. ]

view视图

  1. def ajax_sum(request):
  2. if request.is_ajax():
  3. num1 = request.POST.get("num1")
  4. num2 = request.POST.get("num2")
  5. total = int(num1) + int(num2)
  6. return HttpResponse(total)

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <button id="btn1">ajax_sleep</button>
  8. <button id="btn2">ajax_test</button>
  9.  
  10. <hr>
  11. <div>
  12. <input type="text" id="i1"> + <input type="text" id="i2"> =
  13. <input type="text" id="i3"><button id="btn3">计算</button>
  14. </div>
  15. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  16.  
  17. <script>
  18. $("#btn1").click(function () {
  19. $.ajax({
  20. url:"/ajax_sleep/",
  21. type:"GET",
  22. success:function (data) {
  23. console.log(data);
  24. }
  25. }
  26. )
  27. })
  28.  
  29. $("#btn2").click(function () {
  30. $.ajax({
  31. url:"/ajax_test/",
  32. type:"GET",
  33. success:function (data) {
  34. console.log(data);
  35. }
  36. }
  37. )
  38. })
  39. {# 计算案例 #}
  40. $('#btn3').click(function () {
  41. var num1 = $("#i1").val();
  42. var num2 = $("#i2").val();
  43. $.ajax({
  44. url: "/ajax_sum/",
  45. type: "POST",
  46. data:{
  47. num1:num1,
  48. num2:num2,
  49. },
  50. success:function (data) {
  51. $("#i3").val(data);
  52. }
  53. })
  54. })
  55. </script>
  56. </body>
  57. </html>

访问http://127.0.0.1:8000/ajax_temp/

403报错

是由于crfs影响,添加crfs

修改html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <button id="btn1">ajax_sleep</button>
  8. <button id="btn2">ajax_test</button>
  9. {% csrf_token %}
  10. <hr>
  11. <div>
  12. <input type="text" id="i1"> + <input type="text" id="i2"> =
  13. <input type="text" id="i3"><button id="btn3">计算</button>
  14.  
  15. </div>
  16. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  17. <script>
  18. {# 计算案例 #}
  19. $('#btn3').click(function () {
  20. var num1 = $("#i1").val();
  21. var num2 = $("#i2").val();
  22. $.ajax({
  23. url: "/ajax_sum/",
  24. type: "POST",
  25. data:{
  26. num1:num1,
  27. num2:num2,
  28. csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
  29. },
  30. success:function (data) {
  31. $("#i3").val(data);
  32. }
  33. })
  34. })
  35. </script>
  36. </body>
  37. </html>

再次访问,并输入计算值,点击计算

ajax请求流程

当输入非数字计算

调试信息

  1. File "/root/PycharmProjects/orm_demo/app01/views.py", line 131, in ajax_sum
  2. total = int(num1) + int(num2)
  3. ValueError: invalid literal for int() with base 10: 'qq'
  4. [08/Apr/2020 03:48:19] "POST /ajax_sum/ HTTP/1.1" 500 14677

view视图文件

  1. from django.shortcuts import render,HttpResponse
  2. from app01 import models
  3. from django.http import JsonResponse
  4.  
  5. def ajax_sum(request):
  6. if request.is_ajax():
  7. num1 = request.POST.get("num1")
  8. num2 = request.POST.get("num2")
  9. ret = {"status":1,"msg":None}
  10. try:
  11. total = int(num1) + int(num2)
  12. ret["msg"] = total
  13. except Exception as e:
  14. ret['status'] = 0
  15. ret["msg"] = "请输入数字"
  16. #需要使用到数据结构,使用json方式传过去,先要导入jsonhttponse
  17. return JsonResponse(ret)

html调整

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <button id="btn1">ajax_sleep</button>
  8. <button id="btn2">ajax_test</button>
  9. {% csrf_token %}
  10. <hr>
  11. <div>
  12. <input type="text" id="i1"> + <input type="text" id="i2"> =
  13. <input type="text" id="i3"><button id="btn3">计算</button><span id="s1"></span> {#多加一个span标签#}
  14.  
  15. </div>
  16. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  17. <script>
  18. {# 计算案例 #}
  19. $('#btn3').click(function () {
  20. var num1 = $("#i1").val();
  21. var num2 = $("#i2").val();
  22. $.ajax({
  23. url: "/ajax_sum/",
  24. type: "POST",
  25. data:{
  26. num1:num1,
  27. num2:num2,
  28. csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
  29. },
            {#默认传输的值是1,就会把传过来的msg值输入,挡status值为0时,就会把自定义的提示显示,和view视图文件对应#}
  30. success:function (data) {
  31. if (data.status){
  32. $("#i3").val(data.msg);
  33. }else{
  34. $("#s1").text(data.msg);
  35. }
  36. }
  37. })
  38. })
  39. </script>
  40. </body>
  41. </html>

输入非数字时,会有提示

问题,当再次输入正确格式,提示不会小时,

使用定时器解决,显示2秒后消失

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <button id="btn1">ajax_sleep</button>
  8. <button id="btn2">ajax_test</button>
  9. {% csrf_token %}
  10. <hr>
  11. <div>
  12. <input type="text" id="i1"> + <input type="text" id="i2"> =
  13. <input type="text" id="i3"><button id="btn3">计算</button><span id="s1"></span>
  14.  
  15. </div>
  16. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  17. <script>
  18. {# 计算案例 #}
  19. $('#btn3').click(function () {
  20. var num1 = $("#i1").val();
  21. var num2 = $("#i2").val();
  22. $.ajax({
  23. url: "/ajax_sum/",
  24. type: "POST",
  25. data:{
  26. num1:num1,
  27. num2:num2,
  28. csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
  29. },
  30. success:function (data) {
  31. if (data.status){
  32. $("#i3").val(data.msg);
  33. }else{
  34. $("#s1").text(data.msg);
  35. setTimeout(function () {
  36. $("#s1").text("");
  37. },2000)
  38. }
  39. }
  40. })
  41. })
  42. </script>
  43. </body>
  44. </html>

访问后,输入错误值,两秒后消失

四 基于Ajax上传json数据

url设计

  1. from django.contrib import admin
  2. from django.urls import path
  3. from app01 import views
  4. urlpatterns = [
  5. path('admin/', admin.site.urls),
  6. path('add_book/',views.add_book),
  7. path('query_book/',views.query_book),
  8. #ajax相关
  9. path('ajax_sleep/',views.ajax_sleep),
  10. path('ajax_test/',views.ajax_test),
  11. #前端页面
  12. path('ajax_temp/',views.ajax_temp),
  13. #ajax求和
  14. path('ajax_sum/',views.ajax_sum),
  15. #ajax上传json数据
  16. path('ajax_json/',views.ajax_json),
  17. ]

views视图文件

视图响应时,必须是HttpResponse 或者 HttpResponse,不能是render或者redict

  1. def ajax_json(request):
  2. import json
  3. print(request.POST)
  4. print(request.body)
  5. data = json.loads(request.body.decode())
  6. print(data)
  7. return HttpResponse("Ok")

html文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <button id="btn1">ajax_sleep</button>
  8. <button id="btn2">ajax_test</button>
  9. <button id="btn4">上传json数据</button>
  10. {% csrf_token %}
  11. <hr>
  12. <div>
  13. <input type="text" id="i1"> + <input type="text" id="i2"> =
  14. <input type="text" id="i3"><button id="btn3">计算</button><span id="s1"></span>
  15.  
  16. </div>
  17. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  18. <script>
  19. {# 异步案例 #}
  20. $("#btn1").click(function () {
  21. $.ajax({
  22. url:"/ajax_sleep/",
  23. type:"GET",
  24. success:function (data) {
  25. console.log(data);
  26. }
  27. }
  28. )
  29. })
  30.  
  31. $("#btn2").click(function () {
  32. $.ajax({
  33. url:"/ajax_test/",
  34. type:"GET",
  35. success:function (data) {
  36. console.log(data);
  37. }
  38. }
  39. )
  40. })
  41. {# 计算案例 #}
  42. $('#btn3').click(function () {
  43. var num1 = $("#i1").val();
  44. var num2 = $("#i2").val();
  45. $.ajax({
  46. url: "/ajax_sum/",
  47. type: "POST",
  48. data:{
  49. num1:num1,
  50. num2:num2,
  51. csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
  52. },
  53. success:function (data) {
  54. if (data.status){
  55. $("#i3").val(data.msg);
  56. }else{
  57. $("#s1").text(data.msg);
  58. setTimeout(function () {
  59. $("#s1").text("");
  60. },2000)
  61. }
  62. }
  63. })
  64. });
  65. $("#btn4").click(function () {
  66. $.ajax({
  67. url:"/ajax_json/",
  68. type: "POST",
  69. contentType:"json",
  70. headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()}, // 在请求头中添加csrf
  71. data: JSON.stringify({
  72. a:100,
  73. b:200,
  74. user:"darren",
  75. }),
  76. success:function (data) {
  77. console.log(data)
  78. }
  79. })
  80. })
  81. </script>
  82. </body>
  83. </html>

访问点击提交json数据

得到结果

调试输出

  1. <QueryDict: {}>
  2. b'{"a":100,"b":200,"user":"darren"}'
  3. {'a': 100, 'b': 200, 'user': 'darren'}

在使用视图文件时,当使用HttpResponse返回时,前端代码需要使用json的数据,必须需要使用JSON.parse(data){}反序列化才能使用

当使用JsonResponse(ret)返回时,可以直接使用,例如sum案例

五 基于form表单上传文件

下载一张图片到桌面备用,test111.png

url文件

  1. from django.contrib import admin
  2. from django.urls import path
  3. from app01 import views
  4. urlpatterns = [
  5. path('admin/', admin.site.urls),
  6. path('add_book/',views.add_book),
  7. path('query_book/',views.query_book),
  8. #ajax相关
  9. path('ajax_sleep/',views.ajax_sleep),
  10. path('ajax_test/',views.ajax_test),
  11. #前端页面
  12. path('ajax_temp/',views.ajax_temp),
  13. #ajax求和
  14. path('ajax_sum/',views.ajax_sum),
  15. #ajax上传json数据
  16. path('ajax_json/',views.ajax_json),
  17. #form表单上传
  18. path('upload/',views.upload),
  19. ]

views

  1. import os
  2. def upload(request):
  3. if request.method == "POST":
  4. print(request.POST)
  5. print(request.FILES)
  6. #print(request.body) 报错
  7. file_obj = request.FILES.get('file_name')
  8. name = file_obj.name
  9. with open(os.path.join("media", name), "wb") as f:
  10. for i in file_obj:
  11. f.write(i)
  12. return HttpResponse('上传成功')

html写一个form表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <button id="btn1">ajax_sleep</button>
  8. <button id="btn2">ajax_test</button>
  9. <button id="btn4">上传json数据</button>
  10. {% csrf_token %}
  11. <hr>
  12. <div>
  13. <input type="text" id="i1"> + <input type="text" id="i2"> =
  14. <input type="text" id="i3"><button id="btn3">计算</button><span id="s1"></span>
  15.  
  16. </div>
  17. <hr>
  18. <h3>form表单上传文件</h3>
  19. <form action="/upload/" method="POST" enctype="multipart/form-data">
  20. {% csrf_token %}
  21. <input type="text" name="user">
  22. <input type="file" name="file_name">
  23. <input type="submit">
  24. </form>
  25. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  26. <script>
  27. {# 异步案例 #}
  28. $("#btn1").click(function () {
  29. $.ajax({
  30. url:"/ajax_sleep/",
  31. type:"GET",
  32. success:function (data) {
  33. console.log(data);
  34. }
  35. }
  36. )
  37. })
  38.  
  39. $("#btn2").click(function () {
  40. $.ajax({
  41. url:"/ajax_test/",
  42. type:"GET",
  43. success:function (data) {
  44. console.log(data);
  45. }
  46. }
  47. )
  48. })
  49. {# 计算案例 #}
  50. $('#btn3').click(function () {
  51. var num1 = $("#i1").val();
  52. var num2 = $("#i2").val();
  53. $.ajax({
  54. url: "/ajax_sum/",
  55. type: "POST",
  56. data:{
  57. num1:num1,
  58. num2:num2,
  59. csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
  60. },
  61. success:function (data) {
  62. if (data.status){
  63. $("#i3").val(data.msg);
  64. }else{
  65. $("#s1").text(data.msg);
  66. setTimeout(function () {
  67. $("#s1").text("");
  68. },2000)
  69. }
  70. }
  71. })
  72. });
  73. $("#btn4").click(function () {
  74. $.ajax({
  75. url:"/ajax_json/",
  76. type: "POST",
  77. contentType:"json",
  78. headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()}, // 在请求头中添加csrf
  79. data: JSON.stringify({
  80. a:100,
  81. b:200,
  82. user:"darren",
  83. }),
  84. success:function (data) {
  85. console.log(data)
  86. }
  87. })
  88. })
  89. </script>
  90. </body>
  91. </html>

root@darren-virtual-machine:~/PycharmProjects/orm_demo# mkdir media

访问,选择文件

点击submit,上传成功

调试输出

  1. <QueryDict: {'csrfmiddlewaretoken': ['JA1GUiIv2LZCvSTxFjP8IOMaW7MNb3q3tjI5nOtFyXv6RETZxqq729rBOTFlFkE5'], 'user': ['']}>
  2. <MultiValueDict: {'file_name': [<InMemoryUploadedFile: test111.jpeg (image/jpeg)>]}>

服务器查看

root@darren-virtual-machine:~/PycharmProjects/orm_demo# ll media/

六 基于Ajax请求上传文件

修改html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <button id="btn1">ajax_sleep</button>
  8. <button id="btn2">ajax_test</button>
  9. <button id="btn4">上传json数据</button>
  10. {% csrf_token %}
  11. <hr>
  12. <div>
  13. <input type="text" id="i1"> + <input type="text" id="i2"> =
  14. <input type="text" id="i3"><button id="btn3">计算</button><span id="s1"></span>
  15.  
  16. </div>
  17. <hr>
  18. <h3>form表单上传文件</h3>
  19. {# <form action="/upload/" method="POST" enctype="multipart/form-data"> #}
  20. {% csrf_token %}
  21. <input type="text" id="user" name="user">
  22. <input type="file" id="file1" name="file_name">
  23. <button id="btn5">ajax上传文件</button>
  24. {# <input type="submit"> #}
  25. {# </form> #}
  26. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  27. <script>
  28. {# 异步案例 #}
  29. $("#btn1").click(function () {
  30. $.ajax({
  31. url:"/ajax_sleep/",
  32. type:"GET",
  33. success:function (data) {
  34. console.log(data);
  35. }
  36. }
  37. )
  38. })
  39.  
  40. $("#btn2").click(function () {
  41. $.ajax({
  42. url:"/ajax_test/",
  43. type:"GET",
  44. success:function (data) {
  45. console.log(data);
  46. }
  47. }
  48. )
  49. })
  50. {# 计算案例 #}
  51. $('#btn3').click(function () {
  52. var num1 = $("#i1").val();
  53. var num2 = $("#i2").val();
  54. $.ajax({
  55. url: "/ajax_sum/",
  56. type: "POST",
  57. data:{
  58. num1:num1,
  59. num2:num2,
  60. csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
  61. },
  62. success:function (data) {
  63. if (data.status){
  64. $("#i3").val(data.msg);
  65. }else{
  66. $("#s1").text(data.msg);
  67. setTimeout(function () {
  68. $("#s1").text("");
  69. },2000)
  70. }
  71. }
  72. })
  73. });
  74. $("#btn4").click(function () {
  75. $.ajax({
  76. url:"/ajax_json/",
  77. type: "POST",
  78. contentType:"json",
  79. headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()}, // 在请求头中添加csrf
  80. data: JSON.stringify({
  81. a:100,
  82. b:200,
  83. user:"darren",
  84. }),
  85. success:function (data) {
  86. console.log(data)
  87. }
  88. })
  89. })
  90. </script>
  91. </body>
  92. </html>

调试

添加ajax

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <button id="btn1">ajax_sleep</button>
  8. <button id="btn2">ajax_test</button>
  9. <button id="btn4">上传json数据</button>
  10. {% csrf_token %}
  11. <hr>
  12. <div>
  13. <input type="text" id="i1"> + <input type="text" id="i2"> =
  14. <input type="text" id="i3"><button id="btn3">计算</button><span id="s1"></span>
  15.  
  16. </div>
  17. <hr>
  18. <h3>form表单上传文件</h3>
  19. {# <form action="/upload/" method="POST" enctype="multipart/form-data"> #}
  20. {% csrf_token %}
  21. <input type="text" id="user" name="user">
  22. <input type="file" id="file1" name="file_name">
  23. <button id="btn5">ajax上传文件</button>
  24. {# <input type="submit"> #}
  25. {# </form> #}
  26. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  27. <script>
  28. {# 异步案例 #}
  29. $("#btn1").click(function () {
  30. $.ajax({
  31. url:"/ajax_sleep/",
  32. type:"GET",
  33. success:function (data) {
  34. console.log(data);
  35. }
  36. }
  37. )
  38. })
  39.  
  40. $("#btn2").click(function () {
  41. $.ajax({
  42. url:"/ajax_test/",
  43. type:"GET",
  44. success:function (data) {
  45. console.log(data);
  46. }
  47. }
  48. )
  49. })
  50. {# 计算案例 #}
  51. $('#btn3').click(function () {
  52. var num1 = $("#i1").val();
  53. var num2 = $("#i2").val();
  54. $.ajax({
  55. url: "/ajax_sum/",
  56. type: "POST",
  57. data:{
  58. num1:num1,
  59. num2:num2,
  60. csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
  61. },
  62. success:function (data) {
  63. if (data.status){
  64. $("#i3").val(data.msg);
  65. }else{
  66. $("#s1").text(data.msg);
  67. setTimeout(function () {
  68. $("#s1").text("");
  69. },2000)
  70. }
  71. }
  72. })
  73. });
  74. $("#btn4").click(function () {
  75. $.ajax({
  76. url:"/ajax_json/",
  77. type: "POST",
  78. contentType:"json",
  79. headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()}, // 在请求头中添加csrf
  80. data: JSON.stringify({
  81. a:100,
  82. b:200,
  83. user:"darren",
  84. }),
  85. success:function (data) {
  86. console.log(data)
  87. }
  88. })
  89. })
  90. {# ajax上传文件 #}
  91. $("#btn5").click(function () {
  92. var formdata = new FormData();
  93. formdata.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
  94. formdata.append("file_name",$("#file1")[0].files[0]);
  95. $.ajax({
  96. url: "/upload/",
  97. type: "POST",
  98. processData: false, // 告诉jQuery不要去处理发送的数据
  99. contentType: false, // 告诉jQuery不要去设置Content-Type请求头
  100. data: formdata,
  101. success:function (data) {
  102. console.log(data)
  103. }
  104. })
  105. })
  106. </script>
  107. </body>
  108. </html>

修改图片名为test222

点击ajax上传文件

检查服务器文件

root@darren-virtual-machine:~/PycharmProjects/orm_demo# ll media/

七 请求头ContentType

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

  1. application/x-www-form-urlencoded应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。
  2. multipart/form-data是另一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 <form> 表单的 enctype 等于 multipart/form-data。
  3. application/json:这个 Content-Type 作为响应头大家肯定不陌生。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。

058.Python前端Django与Ajax的更多相关文章

  1. 052.Python前端Django框架路由层和视图层

    一.路由层(URLconf) 1.1 路由层简单配置 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Dj ...

  2. 055.Python前端Django模型ORM

    由于前面在centos实验的过程中,pymql一直有属性错误,很难排查出问题,重新做了一个ubuntu的桌面系统同时使用pycharm开发工具作为学习开发工具,具体原因是因为在项目命名出现问题,和自己 ...

  3. 063.Python前端Django分页器

    Django的分页器 1 前期准备 创建一个数据库,用于存放数据 mysql> create database pager default charset=utf8; mysql> use ...

  4. 061.Python前端Django组件用户认证组件

    一 auth认证组件 在使用pymysql,数据库迁移的时候.,默认生成有十张表如下 查看author_user表结构 mysql> desc auth_user; +------------- ...

  5. 059.Python前端Django组件cooki和session

    一 会话跟踪技术 1.1 什么是会话 会话是指一个终端用户(服务器)与交互系统(客户端)进行通讯的过程. 1.2 什么是会话跟踪 对同一个用户对服务器的连续的请求和接受响应的监视.(将用户与同一用户发 ...

  6. 057.Python前端Django模型ORM多表查询

    一 基于对象的查询 1.1 一对多查询 设计路由 from django.contrib import admin from django.urls import path from app01 im ...

  7. 056.Python前端Django模型ORM多表基本操作

    一 准备工作 1.1 新建一个项目 root@darren-virtual-machine:~# cd /root/PycharmProjects/ root@darren-virtual-machi ...

  8. 053.Python前端Django框架模板层

    模板层 一 模板语法之变量 在 Django 模板中遍历复杂数据结构的关键是句点字符, 语法: {{ var_name }} [root@node10 mysite]# cat app01/urls. ...

  9. python Django之Ajax

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

随机推荐

  1. 重磅:谷歌强势回归! google大会报名

    google退出中国已经很久了,有关google回归的消息也流传了很久,今天,我们迎来了回归的开幕式. 1.中国区开发者网站 不需要梯子,赶紧取感受下吧: https://developers.goo ...

  2. Java中的绑定

    1 前言 做了一次笔试题,发现了一题问答题,是关于Java绑定的: 当时做的时候是完全不会的... 于是这里补上一篇Java绑定的文章. 2 绑定 首先来了解一下绑定的概念.绑定是指一个方法的调用与方 ...

  3. 2.7w字!Java基础面试题/知识点总结!(2021 最新版)

    这篇<Java 基础知识总结>是 JavaGuide 上阅读量最高的一篇文章,由于我对其进行了重构完善并且修复了很多小问题,所以,在博客园再同步一下! 文章内容比较多,目录如下: 基础概念 ...

  4. 小程序picker地区级联选择的问题及解决方案

    各种系统中行政区域选择的场景不少,我们也有不少这样的场景.本想使用第三方的组件,但是大多有些小问题,不能满足需要.后面使用picker的mulitSelector模式写了一个,发现这种列模式的体验并好 ...

  5. 动态扩展磁盘(LVM)

    使用gtp格式磁盘为lvm类型 [root@elk-log-srv01 ~]# parted /dev/vdd GNU Parted 3.1 Using /dev/vdd Welcome to GNU ...

  6. 三个dom xss常用tips

    分享dom xss的三个案例 (1)javascript里面过滤单引号和双引号? 搭建环境: 只是过滤了单引号和双引号是可以xss的: 使用<>闭合script即可 </script ...

  7. 1079 Total Sales of Supply Chain

    A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyone invo ...

  8. 17- web测试面试题

  9. 【转】【linux系统】nacos + confd配置nginx

    为什么要支持confd,老的应用配置管理模式是启动时读取配置文件,然后重新读取配置文件需要应用重启.一般的配置管理系统都是代码侵入性的,应用接入配置管理系统都需要使用对应的SDK来查询和监听数据的变更 ...

  10. [转]gitlab ci/cd 发布

    转自 https://meigit.readthedocs.io/en/latest/configure_gitlab_i18n_and_create_gitlab_ci_with_gitlab_ru ...