django-Ajax发送POST请求-csrf跨站请求的三种方式
2024-09-07 15:50:43
第一种
<script>
$(".eq").on("click",function () {
$.ajax({
url:"/eq/",
type:"POST",
data:{
csrfmiddlewaretoken:{{ csrf_token }}, //必须写在模板中,才会被渲染
a:$(".a").val(),
b:$(".b").val()
},
success:function (data) { $(".c").html(data);
}
})
})
</script>
第二种
//模板页面中必须要有 {% csrf_token %}
<script>
$(".eq").on("click",function () {
$.ajax({
url:"/eq/",
type:"POST",
data:{
csrfmiddlewaretoken:$("input:first").val(),
a:$(".a").val(),
b:$(".b").val()
},
success:function (data) { $(".c").html(data);
}
})
})
</script>
第三种
<script src="/static/jquery.cookie.js"></script> //必须先引入它
<script>
$("#btn").on("click",function () {
$.ajax({
url:"/lianxi/",
type:"POST",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data:$("#f1").serialize()
}
)
}) </script>
Ajax(FormData)实现文件上传
FormData是什么呢?
XMLHttpRequest Level 2添加了一个新的接口
FormData
.利用FormData对象
,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()
方法来异步的提交这个"表单".比起普通的ajax,使用FormData
的最大优点就是我们可以异步上传一个二进制文件.所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
模板中的代码:
<h3>Ajax上传文件</h3> <p><input type="text" name="username" id="username" placeholder="username"></p>
<p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p> <button id="upload_button">提交</button>
{#注意button标签不要用在form表单中使用#} <script>
$("#upload_button").click(function(){ var username=$("#username").val();
var upload_file=$("#upload_file_ajax")[0].files[0]; var formData=new FormData();
formData.append("username",username);
formData.append("upload_file_ajax",upload_file); $.ajax({
url:"/upload_file/",
type:"POST",
data:formData,
contentType:false,
processData:false, success:function(){
alert("上传成功!")
}
}); })
</script>
views中的代码:
def index(request): return render(request,"index.html") def upload_file(request):
print("FILES:",request.FILES)
print("POST:",request.POST)
return HttpResponse("上传成功!")
最新文章
- Java 动态生成复杂 Word
- 解决谷歌浏览器和360浏览器 input 自动填充淡黄色背景色的问题
- JSoup——用Java解析html网页内容
- STL学习小结
- C++文件操作之 seekg/seekp/tellg/tellp
- mysql的top n查询
- ruby 方法重载
- mysql导入导出.sql文件 备份还原数据库
- Django之CSRF 跨站请求伪造
- linux管理员
- SQL2008无法连接到.,及sa登录失败的总结
- linux下常见问题
- bzoj4766 文艺计算姬
- 关于我立牌坊那个SSM项目
- I/O模型之三:两种高性能 I/O 设计模式 Reactor 和 Proactor
- [离散时间信号处理学习笔记] 9. z变换性质
- Confluence 6 Microsoft SQL Server 设置准备
- (转载)中文Appium API 文档
- Vue Authentication And Route Handling Using Vue-router(详解)
- every day a practice —— morning