看了文档需要去理解一下load/get/post有什么区别
准备在开发的项目中做一个点赞的功能，这个功能会牵涉到ajax功能，毕竟不需要牵涉到整个页面的加载。
之前也没好好看Ajax，这里重新过一遍
原生的ajax就不说了，有点繁琐，直接上jquery的ajax。
基础
jquery的安装，我用的CDN模式，首先在html文件的head里面挂上地址
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$('#testbutton').click(function(){
$('#test1').hide();
});
});
</script>
</head>
<body>
<div id="test1">
<p>这个区域需要隐藏</p>
</div>
<button type="button" id="testbutton">Test button</button>
</body>
</html>
Load()
先来看下load的定义
Load定义
首先: load的前提是跟随在selector后面的
其次: load无论你的请求是否成功，他的callback函数都可以执行。
但是有些时候他也不会触发，比如下面的代码，如果在document里找不到test1这个id的话，那么后面的load内容也不会被触发.
$('#test1').load('/static/test_files/test.html');
<script>
$(document).ready(function(){
$('#testbutton').click(function(){
$('#test1').load('/static/test_files/test.html #test1');
});
});
</script>
<p id="test1">这个是被加载的内容1</p>
<p id="test2">这是被加载的内容2</p>
另外，在url后面，是可以添加选择器的，选择你到底要加载哪一部分的内容，也就意味着可以不用加载整个文件内容，比如我现在页面里有2个p，id分别是test1和test2，我目前的代码就是只加载test1.
加载test1
get()
再来看下get的定义，get的使用大前提是请求是成功的，也就是如果请求不成功，也就不会触发callback回调函数。
再者，get无需由selector开头，而是直接用$.get开头，不过他只能调用整个目标文件内容，而无法做到取其中的一部分。
get的定义
<script>
$(document).ready(function(){
$('#testbutton').click(function(){
$.get('/static/test_files/test.html',function(data,status){
alert(data);
});
});
});
</script>
效果图
post()
接下来要讲一下post这个方法了，在使用post方法的过程中踩了一个坑
首先还是来看一下post的定义
post定义
然后我们来编写一下post的前端代码
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$('#testbutton').click(function(){
$.post('/get_ajax_post',
{
user_name: 'ajax_username',
pass_word: 'ajax_password'
},
function(data){
alert(data);
});
});
});
</script>
看似没什么毛病，进行数据提交，但是按了按钮以后没反应，看下有什么报警
报警图片
发生了跨站请求伪造的报警，因为Django在使用ajax进行post提交的时候，他的原理是在前端生成一个表单，但是我们知道，在django里面提交表单的话，是需要使用csrf_token的，那怎么办呢？
翻了一堆资料，找了个最简单的方法，在前端页面的任意地方，包括在<head>里面，添加{%csrf_token%}，修改如下，并在提交的数据中，一并把csrfmiddlewaretoken作为数据提交，就ok了
<head>
{% csrf_token %}
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$('#testbutton').click(function(){
$.post('/get_ajax_post',
{
user_name: 'ajax_username',
pass_word: 'ajax_password',
csrfmiddlewaretoken:'{{ csrf_token }}'
},
function(data){
alert(data);
});
});
});
</script>
</head>
最后来看下后端views是怎么写的.
如果不是post方法请求，就渲染正常页面
如果是post方法的请求，则跳出‘成功接收到ajax提交的数据’这样的提示
def get_ajax_post(request):
if request.method == 'POST':
user_name = request.POST.get('user_name')
pass_word = request.POST.get('pass_word')
return HttpResponse('成功接收到ajax提交的数据')
return render(request,'get_ajax_post.html')
成功效果图
当然，还有其他好几个方法，比如通过cookies的方法来解决这个问题，我也没有尝试，等放在 .ajax方法里再记录
网友评论