django中使用Ajax

内容:

1.Ajax原理与基本使用

2.Ajax发送get请求

3.Ajax发送post请求

4.Ajax上传文件

5.Ajax设置csrf_token

6.django序列化

参考:https://www.cnblogs.com/liwenzhou/p/8718861.html

1.Ajax原理与基本使用

关于Ajax的原理及其基本使用,直接看这篇博文即可:https://www.cnblogs.com/wyb666/p/9387488.html

2.Ajax发送get请求

views.py:

 1 # Ajax get请求的后端处理函数
 2 def ajax_add(request):
 3     print(request.GET)
 4     print(request.GET.get("i1"))
 5     print(request.GET.get("i2"))
 6
 7     i1 = int(request.GET.get("i1"))
 8     i2 = int(request.GET.get("i2"))
 9
10     ret = i1 + i2
11     return HttpResponse(ret)

前端代码:

 1 <input type="text" id="i1">+
 2 <input type="text" id="i2">=
 3 <input type="text" id="i3">
 4 <input type="button" value="AJAX get提交" id="b1">
 5
 6 <script src="/static/jquery-3.3.1.js"></script>
 7 <script>
 8     $("#b1").on("click", function () {
 9         var i1 = $("#i1").val()
10         var i2 = $("#i2").val()
11         // 往后端发数据
12         $.ajax({
13             url: "/ajax_add/",
14             type: "get",
15             data: {"i1": i1, "i2": i2},
16             success: function (arg) {
17                 {#alert(arg);#}
18                 // 把返回的结果填充到 id是i3的input框中
19                 $("#i3").val(arg)
20             }
21         })
22     })
23 </script>

3.Ajax发送post请求

views.py:

1 # Ajax post请求的后端处理函数
2 def ajax_add3(request):
3     print(request.POST)
4     print("-" * 120)
5     i1 = int(request.POST.get("i1"))
6     i2 = int(request.POST.get("i2"))
7
8     ret = i1 + i2
9     return HttpResponse(ret)

前端代码:

 1 <input type="text" id="i1">+
 2 <input type="text" id="i2">=
 3 <input type="text" id="i3">
 4 <input type="button" value="AJAX post提交" id="b3">
 5
 6 <script src="/static/jquery-3.3.1.js"></script>
 7 <script src="/static/setupajax.js"></script>
 8 <script>
 9     $("#b3").on("click", function () {
10         var i1 = $("#i1").val()
11         var i2 = $("#i2").val()
12         // 往后端发数据
13         $.ajax({
14             url: "/ajax_add3/",
15             type: "post",
16             data: {"i1": i1, "i2": i2},
17             success: function (arg) {
18                 {#alert(arg);#}
19                 // 把返回的结果填充到 id是i3的input框中
20                 $("#i3").val(arg)
21             }
22         })
23     })
24 </script>

4.Ajax上传文件

 1 // 上传文件示例
 2 $("#b1").click(function () {
 3     var formData = new FormData();
 4     formData.append("csrfmiddlewaretoken", $("[name=‘csrfmiddlewaretoken‘]").val());
 5   formData.append("f1", $("#f1")[0].files[0]);
 6     $.ajax({
 7         url: "/upload/",
 8         type: "POST",
 9         processData: false,  // 告诉jQuery不要去处理发送的数据
10         contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
11         data: formData,
12         success:function (data) {
13             console.log(data)
14     }
15   })
16 })

5.Ajax设置csrf_token

(1)通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送

 1 $.ajax({
 2   url: "/cookie_ajax/",
 3   type: "POST",
 4   data: {
 5     "username": "xxx",
 6     "password": 123456,
 7     // 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中
 8     "csrfmiddlewaretoken": $("[name = ‘csrfmiddlewaretoken‘]").val()
 9   },
10   success: function (data) {
11     console.log(data)
12   }
13 })

(2)通过获取返回的cookie中的字符串 放置在请求头中发送

 1 // 引入一个jquery.cookie.js插件,然后写以下代码:
 2
 3 $.ajax({
 4   url: "/cookie_ajax/",
 5   type: "POST",
 6   // 从Cookie取csrftoken,并设置到请求头中
 7   headers: {"X-CSRFToken": $.cookie(‘csrftoken‘)},
 8   data: {"username": "xxx", "password": 123456},
 9   success: function (data) {
10     console.log(data);
11   }
12 })

或者这样(推荐这样写):

 1 function getCookie(name) {
 2     var cookieValue = null;
 3     if (document.cookie && document.cookie !== ‘‘) {
 4         var cookies = document.cookie.split(‘;‘);
 5         for (var i = 0; i < cookies.length; i++) {
 6             var cookie = jQuery.trim(cookies[i]);
 7             // Does this cookie string begin with the name we want?
 8             if (cookie.substring(0, name.length + 1) === (name + ‘=‘)) {
 9                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
10                 break;
11             }
12         }
13     }
14     return cookieValue;
15 }
16
17 // 在cookie中获取csrftoken
18 var csrftoken = getCookie(‘csrftoken‘);
19
20 function csrfSafeMethod(method) {
21   // these HTTP methods do not require CSRF protection
22   return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
23 }
24
25 // 为每次Ajax请求之前执行该函数
26 // 只要在使用Ajax的地方之前导入即可
27 $.ajaxSetup({
28   beforeSend: function (xhr, settings) {
29     if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
30       xhr.setRequestHeader("X-CSRFToken", csrftoken);
31     }
32   }
33 });

注:

如果使用从cookie中取csrftoken的方式,需要确保cookie存在csrftoken值。

如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。

这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie:

1 django.views.decorators.csrf import ensure_csrf_cookie
2
3 @ensure_csrf_cookie
4 def login(request):
5     pass

6.django序列化

(1)什么是序列化

序列化:将字符串转换成json格式的数据便于后端将数据发送给前端处理

(2)django序列化

使用django内置的serializers进行序列化:

1 from django.core import serializers
2
3 def books_json(request):
4     book_list = models.Book.objects.all()[0:10]
5     ret = serializers.serialize("json", book_list)
6     return HttpResponse(ret)

原文地址:https://www.cnblogs.com/wyb666/p/9688670.html

时间: 2024-11-05 21:45:43

django中使用Ajax的相关文章

Django中的Ajax详解

AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML). 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求:异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求.AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新:(这一特点给用户的感受是在不知不觉中完成请

django中给ajax提交加上csrf

在html中的script标签下插入下面代码 在html文档加载时候运行下面代码,并且使用$.ajaxSetup设置ajax每次调用时候传入的数据,$.ajaxSetup进行默认的设置,只需要设置一次,每次ajax调用都会使用. 注意,以下代码使用了jquery,jquery.cookies.js 库.在head部分引用这些库,才能使得正常运行.另外需注意在某些特别情况下django并没有将csrftoken设置到cookie里面.那么这代码就失去了作用. $(document).ready(

django中通过文件和Ajax来上传文件

一.通过form表单来上传文件 1.在html模板中 <form action="/index/" method="post" enctype="multipart/form-data">#在form属性中写入enctype="multipart/form-data" 这样form表单才能支持数据文件的提交 {% csrf_token %} 头像<input type="file" nam

Django中ajax的基本用法

初识Ajax: ? Ajax并不是一门新的语言,它其实就是基于js写的一个功能模块而已 由于原生js书写ajax较为繁琐,django中我们一般直接使用jQuery封装好的ajax模块 案例: ? 页面上有是三个input框,一个按钮,用户在前两个框中输入数字,点击按钮保证页面不刷新的情况下将数据发到后端做计算,再将计算好的结果发送给前端展示到第三个input框中 ajax基本语法结构 $.ajax({ // 1. 到底朝哪个后端提交数据 url:'', // 控制数据的提交路径 (有三种方法,

Django中的CSRF

CSRF(Cross Site Request Forgery, 跨站域请求伪造) CSRF 背景与介绍 CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一.其他安全隐患,比如 SQL 脚本注入,跨站域脚本攻击等在近年来已经逐渐为众人熟知,很多网站也都针对他们进行了防御.然而,对于大多数人来说,CSRF 却依然是一个陌生的概念.即便是大名鼎鼎的 Gmail, 在 2007 年底也存在着 C

Django中使用Bootstrap展示树形结构

概述 在企业管理系统中,经常会有树形结构需求,例如:组织结构.权限等等,本文使用Django和Bootstrap Tree View来展示企业组织结构和对应组织的人员. 实现 模型类(models.py) class Department(models.Model): name = models.CharField(u'单位名称', max_length=30) pri = models.IntegerField(u'序号') desc = models.CharField(u'备注', max

Django中视图总结[urls匹配,HttpRequest对象,HttpResponse对象,对象序列化接受及案例]

视图的功能: 接收请求,进行处理,返回应答. 视图返回的内容为: HttpResponse的对象或子对象 render 返回的是HttpResponse的对象 JsonResponse是HttpResponse的子类 HttpResponseRedirect也是HttpResonse的子类 redirect是HttpResponseRedirect的一个简写 总结:所以视图返回的内容一般为:render,redirect,JsonResponse,Httpresponse 定义视图函数分为两步

django中如何生成非HTML格式的内容。

某些时候可能有这样的需求,在网页中点击一个链接或者一个按钮希望返回一张图片.一个pdf文档.一个csv文档等而非HTML.在diango中很容易做到这些.django中的view用来接收http request并返回web response.通常情况下,返回的内容为HTML,但其能够返回的不仅仅如此,还可以是上述图片.pdf文件等等.返回非HTML形式的内容的关键在于HttpResponse这个类,尤其是mimetype这个参数,通过将此参数设置为不同的值可以提示浏览器view返回了不同格式的内

Django中的Json知识拾遗

  在做Django项目时,用到了很多AJax的知识,说到Ajax就会涉及到json的知识,因此索性准备来一篇博客,将项目过程中遇到的问题记录下,以方便日后的查阅. 一.什么是JSon? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据. 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,