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 学习笔记 -详解mybatis 及实例demo

    快速入门1 要点: 首先明白mybatis 是什么 这是一个持久层的框架.之前叫做ibatis.所以,在它的代码中出现ibatis这个词的时候,不要感到惊讶.不是写错了,它确实就是这个样子的. 首先, ...

  2. hdu 1372 BFS

    A friend of you is doing research on the Traveling Knight Problem (TKP) where you are to find the sh ...

  3. Ubuntu使用总结一

    一.安装 Ubuntu桌面版与服务器版的不同之处桌面版面向个人电脑使用者,可以进行文字处理.网页浏览.多媒体播放和玩游戏.本质上说,这是一 个为普通用户所定制的多用途操作系统.另一方面,服务器版旨在充 ...

  4. java中二维数组内存分配

    区分三种初始化方式: 格式一: 数据类型[][] 数组名 = new 数据类型[m][n]; m:表示这个二维数组有多少个一维数组. n:表示每一个一维数组的元素有多少个. //例:int arr[] ...

  5. django使用ckeditor上传图片

    1.在模型类中设置字段为富文本类型,这里需要注意引入的是RichTextUploadingField,以允许上传图片,需要和RichTextField区分开 from ckeditor_uploade ...

  6. JAVA工具类-StrUtils

    public class StrUtils { public static final String UTF_8 = "UTF-8"; /** * 去掉小数字符串后面无用的零 */ ...

  7. sqlserver 表操作 SQL篇

    数据库知识点 1.数据库操作: 增:insert into 表名 values(值1,值2,值3) 删:delete 列名 from 表名 where 条件 改:update 表名 set =值 wh ...

  8. Linux----------rsync的介绍及安装使用

    目录 一.rsync的介绍 1.1rsync的特点 二.rsync命令 三.rsync的ssh认证协议 四.ssh协议方式使用方法 五.rsync协议方式使用方法即 (rsync + inotifu- ...

  9. MySQL Execution Plan--IN子查询包含超多值引发的查询异常

    问题描述 版本:MySQL 5.7.24 SQL语句: SELECT wave_no, SUM(IF(picking_qty IS NULL, 0, picking_qty)) AS PICKED_Q ...

  10. pl/sql oracle数据库中文数据显示异常或者不能使用中文查询的解决办法

    1首先我们需要找到pl/sql developer 目录 然后在该目录下 创建一个bat文件 在文件中定义 set NLS_LANG=AMERICAN_AMERICA.UTF8start PLSQLD ...