Python - Django - AJAX 实现 POST 请求
index.html:
<input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
<input type="button" value="AJAX提交" id="b1"> <script src="/static/jquery-3.3.1.js"></script>
<script>
$("#b1").on("click", function () {
$.ajax({
url: "/ajax_add/",
type: "POST",
data: {"i1": $("#i1").val(), "i2": $("#i2").val()},
success: function (data) {
$("#i3").val(data);
}
})
});
</script>
views.py:
from django.shortcuts import render, HttpResponse def index(request):
return render(request, "index.html") def ajax_add(request):
num1 = request.POST.get("i1")
num2 = request.POST.get("i2")
ret = int(num1) + int(num2)
return HttpResponse(ret)
访问,http://127.0.0.1:8000/index/
输入两组数,点击提交
这里需要验证 csrf token
方法一:
在 index.html 中添加 csrf token
访问,http://127.0.0.1:8000/index/
右键 -> 检查
取到 name
修改 index.html:
{% csrf_token %}
<input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
<input type="button" value="AJAX提交" id="b1"> <script src="/static/jquery-3.3.1.js"></script>
<script>
$("#b1").on("click", function () {
var csrfToken = $("[name='csrfmiddlewaretoken']").val();
$.ajax({
url: "/ajax_add/",
type: "POST",
data: {"i1": $("#i1").val(), "i2": $("#i2").val(), "csrfmiddlewaretoken": csrfToken},
success: function (data) {
$("#i3").val(data);
}
})
});
</script>
运行
方法二:
在 /static/ 目录下创建 test.js:
// 获取 cookie
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
} var csrftoken = getCookie('csrftoken'); // 获取 cookie 中的 csrf token // 哪些请求方法不需要用到 csrf token
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
} // 要用到 csrf token
$.ajaxSetup({
beforeSend: function (xhr, settings) { // 在发送请求之前
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken); // 在请求头中添加 csrf token
}
}
});
在 index.html 中导入该 js 文件
{% csrf_token %}
<input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
<input type="button" value="AJAX提交" id="b1"> <script src="/static/jquery-3.3.1.js"></script>
<script src="/static/test.js"></script>
<script>
$("#b1").on("click", function () {
$.ajax({
url: "/ajax_add/",
type: "POST",
data: {"i1": $("#i1").val(), "i2": $("#i2").val()},
success: function (data) {
$("#i3").val(data);
}
})
});
</script>
运行结果:
Python - Django - AJAX 实现 POST 请求的更多相关文章
- python与 Ajax跨域请求
同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...
- Python django解决跨域请求的问题
解决方案 1.安装django-cors-headers pip3 install django-cors-headers 2.配置settings.py文件 INSTALLED_APPS = [ . ...
- Python Django Ajax 传递列表数据
function getTableContent(node) { event.preventDefault(); var tr = node.parentNode.parentNode; var id ...
- python Django Ajax基础
升级版: ajax 创建多对多以及增加示例: views中的接收
- Django Ajax提交数据请求
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- django ajax发送post请求
第一种:将csrf_token放在from表单里 <script> function add_competion_goods() { $.ajax({ url: "{% url ...
- python Django之Ajax
python Django之Ajax AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案. 异步 ...
- python django初识ajax
什么是json json是轻量级文本数据交互格式 json独立语言 符合的json对象 ["one", "two", "three"] { ...
- Python之路【第三十一篇】:django ajax
Ajax 文件夹为Ajaxdemo 向服务器发送请求的途径: 1.浏览器地址栏,默认get请求: 2.form表单: get请求 post请求 3.a标签,超链接(get请求) 4.Ajax请求 特点 ...
随机推荐
- Mac下安装oh my zsh之后配置环境变量失效问题
背景:在刚拿到mac 的时候,使用了默认的bash,由于工作需要在电脑上安装了maven,在~/.bash_profile 文件中添加了maven的配置如下 $ cat ~/.bash_profile ...
- 当电脑上有两个mysql时,如何让jmeter连接自己需要的那个mysql
1.当有两个mysql时,修改其中一个的mysql端口号为3307 ,也可以是其他8788, 在文件my.ini中修改端口号为:3307:修改完之后记得重启mysql哦:dos下命令可以用net st ...
- swagger2 注解说明
整体说明 用于controller类上 注解 说明 @Api 协议集描述 方法上 注解 说明 @ApiOperation - @ApiImplicitParams 方法上 @ApiImplicitPa ...
- 使用树莓派GPIO控制继电器
一.使用方法总结: VCC接+5v,GND接负,IN1接GPIO口, 二.然后使用Linux命令或者编程控制GPIO口高低电位即可,如:执行下列命令: gpio readall 列出所有针角 gp ...
- ms08067 分析与利用
分析 漏洞位于 NetpwPathCanonicalize 函数里面,这个函数的作用在于处理路径中的 ..\ 和 .\ 信息.该函数声明如下: DWORD NetpwPathCanonicalize( ...
- 项目Alpha冲刺 7
作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 介绍第7天冲刺的项目进展.问题困难和心得体会 1.团队信息 队名:火鸡堂 队 ...
- test20190903 JKlover
100+65+100=265,T2就差了一点. 乌合之众 给出一个 n × n 的, 元素为自然数的矩阵.这个矩阵有许许多多个子矩阵, 定义它的所有子矩阵形成的集合为 S . 对于一个矩阵 k , 定 ...
- idea拉取最新代码弹窗(Ctrl + T)
在此设置
- 斜率优化板题 HDU2829 Lawrence
题目大意:给定一个长度为nnn的序列,至多将序列分成m+1m+1m+1段,每段序列都有权值,权值为序列内两个数两两相乘之和.求序列权值和最小为多少? 数据规模:m<=n<=1000.m&l ...
- arduino adc数模放大器
http://ardui.co/archives/833 http://henrysbench.capnfatz.com/henrys-bench/arduino-voltage-measuremen ...