django中ajax的使用

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

ajax的优点

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

ajax无须刷新整个页面;

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

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

views.pydef 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); //接收传来的信息,进行反序列化
                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>

下面是效果

原文地址:https://www.cnblogs.com/mmyy-blog/p/10512361.html

时间: 2024-10-10 17:45:55

django中ajax的使用的相关文章

Django中ajax的基本用法

初识Ajax: ? Ajax并不是一门新的语言,它其实就是基于js写的一个功能模块而已 由于原生js书写ajax较为繁琐,django中我们一般直接使用jQuery封装好的ajax模块 案例: ? 页面上有是三个input框,一个按钮,用户在前两个框中输入数字,点击按钮保证页面不刷新的情况下将数据发到后端做计算,再将计算好的结果发送给前端展示到第三个input框中 ajax基本语法结构 $.ajax({ // 1. 到底朝哪个后端提交数据 url:'', // 控制数据的提交路径 (有三种方法,

Django中的Json知识拾遗

  在做Django项目时,用到了很多AJax的知识,说到Ajax就会涉及到json的知识,因此索性准备来一篇博客,将项目过程中遇到的问题记录下,以方便日后的查阅. 一.什么是JSon? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据. 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,

Django+JQuery+Ajax+Post方案中的问题及解决

遇到的问题 请求发送后,服务端无响应 Django对于POST请求会检查请求来源,表单方式提交时: 在Form内添加 `{% csrf_token %}` 标签: request响应函数前,添加 `@csrf_exempt` ; Jquery POST 方式提交时,在服务端添加了 @csrf_exempt ,在Django1.5版本后,无法直接通过POST获取参数,通过`raw_data = request.body` 获取数据时,出现如下错误提示: Exception: You cannot

Django中的Ajax详解

AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML). 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求:异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求.AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新:(这一特点给用户的感受是在不知不觉中完成请

django中如何实现ajax(post)日记选

上回的<Django和Ajax的那些事儿-Ajax Get>,讲过$.get(),它是从Django服务端获取我们想要的数据,然后渲染到前端html.今天说到Post方式,葫芦画瓢,让人想:会不会 有$.post().嗯,没错,的确有$.post(),官网示例:view plainprint? $.post("test.cgi",             { name: "John", time: "2pm" },          

Django使用Ajax实现页面无刷新评论回复功能

虽然Django本身自带Form可以提交表单,但在Django中结合Jquery使用Ajax,可以让Django开发的应用发挥更好的用户体验,同时可以降低服务器的负担.普通提交表单方式需要刷新整个页面才可以将评论显示出来,而使用Ajax提交评论之后,可以在页面无刷新的情况下显示出来. 首先是model: class Replay(models.Model): content = models.TextField() post = models.ForeignKey(Post) replay_ti

python Django之Ajax

python Django之Ajax AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案. 异步的JavaScript:使用 [JavaScript语言] 以及 相关[浏览器提供类库] 的功能向服务端发送请求,当服务端处理完请求之后,[自动执行某个JavaScript的回调函数].PS:以上请求和响应的整个过程是[偷偷]进行的,页面上无任何感知. XMLXML是一种标记语言,是Ajax在和后台

Django中的CSRF

CSRF(Cross Site Request Forgery, 跨站域请求伪造) CSRF 背景与介绍 CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一.其他安全隐患,比如 SQL 脚本注入,跨站域脚本攻击等在近年来已经逐渐为众人熟知,很多网站也都针对他们进行了防御.然而,对于大多数人来说,CSRF 却依然是一个陌生的概念.即便是大名鼎鼎的 Gmail, 在 2007 年底也存在着 C

django 接受 ajax 传来的数组对象

django 接受 ajax 传来的数组对象 发送:ajax 通过 POST 方式传来一个数组 接收:django 接受方式 array = request.POST.getlist('key[]') 其中,key为包含该数组的键值对的键. 尤其要注意"[]",少了它将不能接受成功 为什么要加"[]"? 分析前台发送数据,我们会发现:ajax自动给数组中的数据的键名后添加了"[]"