ajax(Asynchronous Javascript And Xml) 异步javascript和XML

ajax的优点

使用javascript技术向服务器发送异步请求

ajax无须刷新整个页面;

由于ajax响应的是局部页面,因此性能要高

当以get的方式向服务器发送请求:

views.py
def user_valid(request):
name=request.GET.get("name")
ret=Author.objects.filter(name=name)
res={"state":True,"msg":""}
if ret:
res["state"]=False
res["msg"]="用户存在"
import json return HttpResponse(json.dumps(res)) #向ajax发送json数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>ajax请求</p>
<button class="s1">send_ajax</button>
<p class="con"></p> <hr><p>用户名:<input type="text" id="user"><span class="error"></span></p>
<script src="/static/js/jquery-3.3.1.min.js">
</script>
<script>
$(".s1").click(function(){
$.ajax({
url:"/send_ajax/",
type:"get",
data:{},
success:function(data){
$(".con").html(data)
}
})
});
$("#user").blur(function () { //鼠标失去焦点事件
$.ajax({
url: "/user_valid/",
type: "get",
data: {"name": $("#user").val()},
success: function (data) {
console.log(data);
console.log(typeof data);
var data = JSON.parse(data); //接收传来的信息,进行反序列化,这里JSON要输入大写否则出不来
console.log(data);
console.log(typeof data);
if (!data.state) {
$(".error").html(data.msg).css("color", "red") #这里的css样式是以,隔开的
} }
})
});</script>
</body>
</html>

下面是以post的方式提交,并且跨域伪造csrf的方式(三种)

def user_valid(request):

    name = request.POST.get("name")
ret=Author.objects.filter(name=name)
res={"state":True,"msg":""}
if ret:
res["state"]=False
res["msg"]="用户存在"
import json return HttpResponse(json.dumps(res))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>ajax请求</p>
<button class="s1">send_ajax</button>
<p class="con"></p> <hr>
{% csrf_token %}
#方式一
<p>用户名:<input type="text" id="user"><span class="error"></span></p>
<script src="/static/js/jquery-3.3.1.min.js">
</script>
<script>
$(".s1").click(function(){
$.ajax({
url:"/send_ajax/",
type:"get",
data:{},
success:function(data){
$(".con").html(data)
}
})
});
//下面改成post请求如何避免crsf错误呢
$("#user").blur(function () {
$.ajax({
url: "/user_valid/",
type: "post",
data: {"name": $("#user").val(),
"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(), //方式二
       headers:{"X-CSRFToken":$.cookie('csrftoken')}, //方式三 },
       
success: function (data) {
console.log(data);
console.log(typeof data);
var data = JSON.parse(data);
console.log(data);
console.log(typeof data); if (!data.state) {
$(".error").html(data.msg).css("color", "red")
} }
})
}); </script>
</body>
</html>

下面是效果

如何不用上面的方式,也可以通过csrf中的csrf_exempt 的方法排除验证csrf

方式一:在views.py里面修改

#urls.py里面
url(r'^login/$',views.LoginView.as_view()),
#views.py

from django.shortcuts import render,HttpResponse,redirect

from django.views.decorators.csrf import csrf_exempt   #导入
# Create your views here. from rbac.models import UserInfo
from django.views import View class LoginView(View):
def get(self,request):
return render(request,"login.html") def post(self,request): user=request.POST.get("user")
pwd=request.POST.get("pwd") user=UserInfo.objects.filter(name=user,pwd=pwd).first()
print(user,user.pk)
if user:
request.session["user_id"]=user.pk
#将用户的权限注册到session中
permission_list=[]
ret=user.roles.all().values("permissions__url").distinct()
for per in ret:
permission_list.append(per.get("permissions__url"))
# print(ret)
request.session["permission_list"]=permission_list
return HttpResponse("ok")
return HttpResponse("用户名或密码错误")
@csrf_exempt #当继承django里面的类时,必须要写一个dispath方式,并写在它上面
def dispatch(self,*args,**kwargs):
# return super(LoginView,self).dispatch(*args,**kwargs) #这两个方法都可以
return super().dispatch(*args, **kwargs)

方式二:加入到urls里面

# urls
from django.views.decorators.csrf import csrf_exempt
     url(r'^login/$',csrf_exempt(views.LoginView.as_view())),  #加入到urls里面

#views.py
from django.shortcuts import render,HttpResponse,redirect

# Create your views here.

from rbac.models import UserInfo
from django.views import View class LoginView(View):
def get(self,request):
return render(request,"login.html") def post(self,request): user=request.POST.get("user")
pwd=request.POST.get("pwd") user=UserInfo.objects.filter(name=user,pwd=pwd).first()
print(user,user.pk)
if user:
request.session["user_id"]=user.pk
#将用户的权限注册到session中
permission_list=[]
ret=user.roles.all().values("permissions__url").distinct()
for per in ret:
permission_list.append(per.get("permissions__url"))
# print(ret)
request.session["permission_list"]=permission_list
return HttpResponse("ok")
return HttpResponse("用户名或密码错误")
 

ajax处理json数据

1 我们在views里面向ajax发送一个json数据

def send_ajax(request):

    import json
return HttpResponse(json.dumps({"name":"xinxin"})) #index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>ajax请求</p>
<button class="s1">send_ajax</button>
<p class="con"></p> <hr>
{% csrf_token %}
<p>用户名:<input type="text" id="user"><span class="error"></span></p>
<script src="/static/js/jquery-3.3.1.min.js">
</script>
<script>
//没有指定dataType的情况
/*  $(".s1").click(function(){
$.ajax({
url:"/send_ajax/",
success:function(data){
console.log(data); //{"name": "xinxin"}
console.log(typeof(data)); //string
}
})
});*/   //指定dataType的情况
$(".s1").click(function(){
$.ajax({
url:"/send_ajax/",
dataType:"json", //主要T要大写
success:function(data){
console.log(data); //Object {name: "xinxin"} 类型发生了变化
console.log(typeof(data)); // object
},
error:function(jqXHR,textStatus,err){
console.log(err);
console.log("数据错误。。。。。。。")
} })
});

</script>
 

2 向ajax发送一个其他数据时

def send_ajax(request):

    return HttpResponse("{'name':'xinxin'}")

#index.html
  //指定dataType的情况
$(".s1").click(function(){
$.ajax({
url:"/send_ajax/",
dataType:"json", //主要T要大写
success:function(data){
console.log(data); //Object {name: "xinxin"} 类型发生了变化
console.log(typeof(data)); // object
},
error:function(jqXHR,textStatus,err){
console.log(err); //报错打印出错误信息
console.log("数据错误。。。。。。。") //制定错误信息
} })
});

django中ajax的使用以及避开CSRF 验证的方式的更多相关文章

  1. Django中Ajax提交数据的CSRF问题

    错误信息: Forbidden (CSRF token missing or incorrect.): 什么是CSRF: django为用户实现防止跨站请求伪造的功能,通过中间件 django.mid ...

  2. Django中ajax发送post请求,报403错误CSRF验证失败解决办法

    今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败:先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了:很显 ...

  3. Django中Ajax处理

    1.大部分和Flask中相同. 2.Django处理JSON,主要是对于查询结果集处理. 使用Django提供的序列化的类来完成QuerySet到JSON字符串的转换 from django.core ...

  4. Django中,ajax检测注册用户信息是否可用?

    ajax检测注册用户信息主体思路 1.在settings.py中配置需要使用的信息 #对static文件进行配置 STATICFILES_DIRS=[ os.path.join(BASE_DIR,'s ...

  5. Django用ajax发送post请求时csrf拦截的解决方案

    把下面的代码写在模版文件中就可以了, 注:不是js文件,是模版文件加载的执行的,所有写js里没效果 $.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf ...

  6. django中csrftoken跨站请求伪造的几种方式

    1.介绍 我们之前从前端给后端发送数据的时候,一直都是把setting中中间件里的的csrftoken这条给注释掉,其实这个主要起了一个对保护作用,以免恶意性数据的攻击.但是这样直接注释掉并不是理智型 ...

  7. django 的ajax 请求,使用form的验证机制。

    所有的form都需要在后台验证,前台验证是不可靠的,django的验证是后台验证,前台提示错误信息. js验证是在前台的,无需发送消息给后台,但安全性不可靠,强调的是用户体验. 要求,使用弹出框,弹出 ...

  8. DJANGO中正规的建立与USER外键的方式

    以前都是直接与user 最近看书,上说settings.AUTH_USER_MODEL,这样好些...是为记. from django.db import models from django.con ...

  9. django中给ajax提交加上csrf

    代码来自djangoproject网站 在html中的script标签下插入下面代码 在html文档加载时候运行下面代码,并且使用$.ajaxSetup设置ajax每次调用时候传入的数据,$.ajax ...

随机推荐

  1. mybatis:Parameter 'ids' not found.

    https://www.cnblogs.com/baby-lijun/p/5908088.html ps:根本原因就是他们根本就没有理解foreach里面的collection应该放什么东西,错误的理 ...

  2. concat_ws 使用在hive spark-sql上的区别

    concat_ws() 在hive中,被连接对象必须为string或者array<string>,否则报错如下: hive> select concat_ws(',',unix_ti ...

  3. linux磁盘分区笔记

    磁盘基本概念: 硬盘结构:盘片+磁头(盘片可以有多个),工作时盘片高速运转,磁头读取数据 U盘.SSD固态硬盘是用闪存来制作的设备,没有盘片和磁头 Linux磁盘文件名: Linux所有设备都抽象为文 ...

  4. javascript之网页跑马灯

    ---恢复内容开始--- <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. ubuntu16.04中如何启用floodlight的其中一种方式

    1. 提前一台安装好mininet,另一台安装好floodlight 2. 在mininet里面的custom文件夹下自定义文件ProjectGroup10_Topology.py from mini ...

  6. C++插入排序

    直接插入排序是一种简单的插入排序法,适用于少量数据的排序,是一种较为稳定的排序算法,本文通过插入排序的方法实现对一个数组进行从大到小和从小到大的排序. 1. 从小到大的插入排序: 例如:给定整型数组a ...

  7. admin-4

    每个学员机上有三台预先配置好的虚拟机server —— 作为练习用服务器desktop —— 作为练习用客户机classroom —— 提供网关/DNS/软件素材等资源 通过真机上“虚拟系统管理器”访 ...

  8. vim中制表符tabstop用法

    设置tabstop成为其它值可能会导致文件在其它地方出现错误有四种主要方法使用tabs在vim里: 1.总是保持tabstop=8,设置softtabstop=4.shiftwidth=4(或3.或任 ...

  9. c语言题库---- 函数

    ---恢复内容开始--- 1.编写一个函数,功能为返回两个int类型参数的最大的值 #include <stdio.h>int FindMax( int a, int b); int ma ...

  10. js 中逻辑为 false 的8种情况

    如果对象无初始值或者其值为 数字0.-0.null."".false.undefined 或者 NaN,那么对象的逻辑值为 false. 注意:字符串 '0',值为 true ty ...