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. 
						
  2. Django中ajax发送post请求，报403错误CSRF验证失败解决办法
		
    今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败:先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了:很显 ...
    
		
    3. 
						
  3. Django中Ajax处理
		
    1.大部分和Flask中相同. 2.Django处理JSON,主要是对于查询结果集处理. 使用Django提供的序列化的类来完成QuerySet到JSON字符串的转换 from django.core ...
    
		
    4. 
						
  4. Django中,ajax检测注册用户信息是否可用?
		
    ajax检测注册用户信息主体思路 1.在settings.py中配置需要使用的信息 #对static文件进行配置 STATICFILES_DIRS=[ os.path.join(BASE_DIR,'s ...
    
		
    5. 
						
  5. Django用ajax发送post请求时csrf拦截的解决方案
		
    把下面的代码写在模版文件中就可以了, 注:不是js文件,是模版文件加载的执行的,所有写js里没效果 $.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf ...
    
		
    6. 
						
  6. django中csrftoken跨站请求伪造的几种方式
		
    1.介绍 我们之前从前端给后端发送数据的时候,一直都是把setting中中间件里的的csrftoken这条给注释掉,其实这个主要起了一个对保护作用,以免恶意性数据的攻击.但是这样直接注释掉并不是理智型 ...
    
		
    7. 
						
  7. django 的ajax 请求，使用form的验证机制。
		
    所有的form都需要在后台验证,前台验证是不可靠的,django的验证是后台验证,前台提示错误信息. js验证是在前台的,无需发送消息给后台,但安全性不可靠,强调的是用户体验. 要求,使用弹出框,弹出 ...
    
		
    8. 
						
  8. DJANGO中正规的建立与USER外键的方式
		
    以前都是直接与user 最近看书,上说settings.AUTH_USER_MODEL,这样好些...是为记. from django.db import models from django.con ...
    
		
    9. 
						
  9. django中给ajax提交加上csrf
		
    代码来自djangoproject网站 在html中的script标签下插入下面代码 在html文档加载时候运行下面代码,并且使用$.ajaxSetup设置ajax每次调用时候传入的数据,$.ajax ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. PAT乙级考前总结（五)
			
    字符串处理 1003 我要通过! (20 分) “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否 ...
    
			
    2. 
						
  2. 小妖精的完美游戏教室——人工智能，A*算法，启发因子篇
			
    //================================================================//// Copyright (C) 2017 Team Saluk ...
    
			
    3. 
						
  3. nginx uwsgi django 配置
			
    用django框架,uwsgi服务器作为动态服务器,nginx作为静态资源服务器 配置uWSGI,在项目目录下创建uwsgi.ini文件: [uwsgi] #使用nginx连接时使用 socket=1 ...
    
			
    4. 
						
  4. mysql Incorrect usage of UNION and ORDER BY 错误备忘
			
    出现这个错误的语句是酱紫的 select xxx from aaa order by xxx union all select yyy from bbb order by yyy 错误原因居然是,如果 ...
    
			
    5. 
						
  5. 快速简单搭建wordpress平台
			
      公司一直没有文档平台,于是想弄一个,弄过github平台的,但是都没用上,虽然这个搭建出来也没用上,还是花了时间才弄出来的,也许下次有用的时候,可以拿来就用   安装Wordpress的基础环境要 ...
    
			
    6. 
						
  6. c#  BackgroundWorker初试
			
    /* * Created by SharpDevelop. * User: Administrator * Date: 2017/7/31 * Time: 16:18 * * To change th ...
    
			
    7. 
						
  7. xml和java对象互转：JAXB注解的使用详解
			
    先看工具类: import org.slf4j.Logger; import javax.xml.bind.JAXBContext; import javax.xml.bind.Marshaller; ...
    
			
    8. 
						
  8. android studio 升级到3.3.1后，提示程序包不存在
			
    android studio 升级到3.3.1后,提示程序包不存在 原因 主Module--A 引用了其他Moduel--B里的jar库, 只需要把B的dependencies改成如下(implent ...
    
			
    9. 
						
  9. 承接VR外包|AR外包|Unity3D外包|UE4外包（内附案例演示）
			
    北京团队长年承接VR/AR项目外包 咨询QQ:372900288  微信:liuxiang0884
    
			
    10. 
						
  10. 服务器对接码云webhooks
			
    服务安装git php代码(外网必须可以访问) <?php //本地路径滚adminasdfdasfasdf $file = "/wwwroot/webhooksLog.txt&quo ...
    
			
    11.