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请求 特点 ...
随机推荐
- 微信小程序~TabBar底部导航切换栏
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...
- axio 请求中参数是数组
前言 最近在做 Vue 项目中,Get 请求中有的参数是数组,传 JSON 字符串是没有问题的,但是直接传数组就一直报错,有问题. 参数后面无故加了 [],例如:UserIds 变成 UserIds[ ...
- Alpha冲刺(6/10)——2019.4.29
所属课程 软件工程1916|W(福州大学) 作业要求 Alpha冲刺(6/10)--2019.4.29 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪 ...
- 关闭centos大页及swappiness
首先检查THP的启用状态: [root@localhost ~]# cat /sys/kernel/mm/transparent_hugepage/defrag [always] madvise ne ...
- MySQL 日期时间相关函数
第一部分:时间差函数 timestampdiff.datediff.timediff 一.时间差函数:timestampdiff 语法:timestampdiff(interval, datetim ...
- canvas绚丽的随机曲线
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyMAAAHECAIAAAClb2KBAAAgAElEQVR4nOyd+VsaV/v/Pz/UpW3abJ ...
- Task 使用方法
Task的使用方法 1. 调用无参数.无返回值方法 private void button1_Click(object sender, EventArgs e) { Task task = new T ...
- php+tcpdf生成pdf: 中文乱码
TCPDF是一个生成PDF的不错的库,可惜,官方对包括中文在内的东亚字体支持不怎么样的.场景:某项目需要根据数据库信息生成pdf格式的发票,考虑采用稳定的tcpdf,虽然还有许多其它选择,但是这个应该 ...
- 洛谷 P1379 八数码难题 题解
我个人感觉就是一道bfs的变形,还是对bfs掌握不好的人有一定难度. 本题思路: 大体上用bfs搜,用map来去重,在这里只需要一个队列,因为需要较少步数达到的状态一定在步数较多的状态之前入队列. # ...
- C博客作业--我的第一篇博客作业
1你对网络专业或计算机专业了解是怎样的 由于从小就与电脑打交道,对于各类软件的生产非常感兴趣,所以在高三开学查询有什么专业的时候,就打算报与计算机有关的专业.我对计算机专业感到非常神奇,毕竟只是看似简 ...