AJAX向Django后端提交POST请求
一、ajax登录示例
urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^login_ajax/$', views.login_ajax, name='login_ajax'),
url(r'^index/$', views.index, name='index'),
]
views.py
from django.shortcuts import render, HttpResponse, redirect
import json
def index(request):
return HttpResponse('this is index')
def login_ajax(request):
if request.method == "POST":
user = request.POST.get("user")
pwd = request.POST.get("pwd")
ret = {"status": 0, 'url': ''}
if user == "alex" and pwd == "123":
ret['status'] = 1
ret['url'] = '/index/'
return HttpResponse(json.dumps(ret))
return render(request, "login_ajax.html")
login_ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录</title>
<link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/signin.css">
</head>
<body>
<div class="container">
<form class="form-signin" action="{% url 'login' %}" method="post">
{% csrf_token %}
<h2 class="form-signin-heading">请登录</h2>
<label for="inputUser" class="sr-only">用户名</label>
<input type="text" id="inputUser" class="form-control" placeholder="用户名" required="" autofocus="" name="user">
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" class="form-control" placeholder="密码" required="" name="pwd">
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住我
</label>
</div>
<input class="btn btn-lg btn-primary btn-block" id="login" value="登陆">
</form>
</div> <!-- /container -->
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
$('#login').click(function () {
$.ajax({
url: '/login_ajax/',
type: 'post',
data: {
csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
user: $('[name="user"]').val(),
pwd: $('[name="pwd"]').val()
},
success: function (data) {
data = JSON.parse(data);
if (data.status) {
window.location = data.url
}
else {
alert('登陆失败')
}
}
})
})
</script>
</body>
</html>
静态文件需要配置，使用了jQuery和Bootstrap。
二、CSRF跨站请求伪造
方式一
将csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()放在POST的请求体中。
示例中就是使用的这种方式。
方式二
给ajax的请增加X-CSRFToken的请求头，对应的值只能是cookie中的csrftoken的值。
所以我们要从cookie中提取csrftoken的值，jQuery不能去cookie，我们使用jquery.cookie的插件。点击下载jquer.cookie插件。
HTML中导入jquery.cookie.js。
<script src="/static/jquery-3.3.1.min.js"></script>
<script src="/static/jquery.cookie.js"></script>
<script>
$('#login').click(function () {
$.ajax({
url: '/login_ajax/',
type: 'post',
headers:{ "X-CSRFToken":$.cookie('csrftoken') },
data: {
user: $('[name="user"]').val(),
pwd: $('[name="pwd"]').val()
},
success: function (data) {
data = JSON.parse(data);
if (data.status) {
window.location = data.url
}
else {
alert('登陆失败')
}
}
})
})
</script>
方式三
使用$.ajaxSetup()给全局的ajax添加默认参数。
可以按照方式一设置data，也可以按照方式二设置请求头。
$.ajaxSetup({
data: {
csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
}
});
$.ajaxSetup({
headers: {"X-CSRFToken": $.cookie('csrftoken')},
});
方式四
官方推荐方法（用到jquery.cookie插件）：
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
}
}
});
AJAX向Django后端提交POST请求的更多相关文章
- ajax向Django前后端提交请求和CSRF跨站请求伪造
1.ajax登录示例 urls.py from django.conf.urls import url from django.contrib import admin from app01 impo ...
- Django—ajax、前端后端编码格式，bulk_create批量插入语数据库、自定义分页
一.ajax简介: XML也是一门标记语言该语法应用场景 1.写配置文件 2.可以写前端页面(odoo框架中 erp) 每家公司都会有属于这家公司独有的内部管理软件:专门用来开发企业内部管理软件 框架 ...
- python 全栈开发，Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)
一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 from app01 import views urlpatterns = [ path('admin/', admi ...
- axiospost请求向后端提交数据
Axios向后端提交数据容易接收不到原因是传参方式是request payload,参数格式是json,而并非用的是form传参,所以在后台用接收form数据的方式接收参数就接收不到了.post表单请 ...
- 前端ajax用post方式提交json数据给后端时，网络报错 415
项目框架:spring+springmvc+mybatis 问题描述:前端ajax用post方式提交json数据给后端时,网络报错 415 前端异常信息:Failed to load resource ...
- Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化
Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web serv ...
- php ajax提交post请求出现数组被截断情况的解决方法
一.场景 今天做保存专题商品列表的时候发现,前端明明有2300多条数据,但是实际服务端接受存入数据库才166条 二.解决过程 经过调试发现前端页面提交post请求时数据量是正确的,但到服务端只能接受到 ...
- ajax提交post请求出现数组被截断情况的解决方法
一.场景 php post 提交数据时传的数据时数组,没有多数据进行序列化处理.发现传到服务端时,部分数据丢失,查询了资料发现php对参数个数有限制,限制在php配置文件中(max_input_var ...
- django提交post请求
在做post的时候,view.py用到了下面的方法,如果是POST的method,就通过request.POTST['XX']获得html中name为XX的值,然后将值save到数据库里 models ...
随机推荐
- js事件冒泡、阻止事件冒泡以及阻止默认行为
事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...
- iOS 支付 [支付宝、银联、微信]
这是开头语 前不久做了一个项目,涉及到支付宝和银联支付,支付宝和银联都是业界的老大哥,文档.SDK都是很屌,屌的找不到,屌的看不懂,屌到没朋友(吐槽而已),本文将涉及到的最新可用SDK.文档,以及本人 ...
- leetcode957. N 天后的牢房
8 间牢房排成一排,每间牢房不是有人住就是空着. 每天,无论牢房是被占用或空置,都会根据以下规则进行更改: 如果一间牢房的两个相邻的房间都被占用或都是空的,那么该牢房就会被占用. 否则,它就会被空置. ...
- python-函数3（全局变量与局部变量）
python-函数3(全局变量与局部变量) 全局变量与局部变量 school = "goy edu" 全局变量,在最上面定义的 def change_name(name): glo ...
- 安装wordpress的过程
1 首先安装lamp.在安装php时,由于ubuntu16.04源中自带的是php7,所以需要直接安装 apt-get install phpapt-get install libapache2-mo ...
- html 自动跳转页面
三种简单的html网页自动跳转方法,可以让你在打开一个html网页时自动跳转到其它的页面. 方法一. <html> <head> <meta http-equiv=&qu ...
- Ubuntu18.04 安装redis
Redis是常用基于内存的Key-Value数据库,比Memcache更先进,支持多种数据结构,高效,快速.用Redis可以很轻松解决高并发的数据访问问题:作为实时监控信号处理也非常不错. 安装red ...
- 最简洁地说明常用的git指令(1)
前提条件,在github上面创建一个仓库,注册好git账号,下面开始 首先在项目文件夹下面,如果有安装git则邮件gitbash进入控制台.另一种方式是使用IDEA打开你要上传的工程,在里面的命令行下 ...
- python 多线程、线程锁、事件
1. 多线程的基本使用 import threading import time def run(num): print('Num: %s'% num) time.sleep(3) if num == ...
- Python之网路编程利用threading模块开线程
一多线程的概念介绍 threading模块介绍 threading模块和multiprocessing模块在使用层面,有很大的相似性. 二.开启多线程的两种方式 1 1.创建线程的开销比创建进程的开销 ...