Django学习系列之结合ajax

AJAX简介

什么是AJAX

AJAX = 异步JavaScript 和 XML(Asynchronous JavaScript and XML)
通过在后台于服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重载整个页面的情况下,对网页的某部分进行更新

AJAX参数

url:提交表单内容到views里的某个函数

type:提交方式(POST或GET)

data:提交到后台的数据,将自动转换成字符串格式

dataType:指定数据处理方式(XML,HTML,JSON,JSONP,Scrit,Text)

回调函数(callback):处理$.ajax()得到的数据

beforesend:在发送请求之前调用,并且转入一个XMLHttpRequest作为参数
error:在请求出错时调用.传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
dataFilter:在请求成功之后调用.传入返回的数据以及dataType参数的值.并且必须返回新的数据(可能是处理过的)传递给success回调函数
success:当请求之后调用,传入返回后的数据,以及包含成功代码的字符串
complate:当请求成功之后调用,无论成功或失败.传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串

一个简单的ajax示例

定义urls.py

from django.conf.urls import url

from django.contrib import admin

from  app01 import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^login/', views.login),

]

定义views.py

from django.shortcuts import render,HttpResponse

import json

# Create your views here.

def login(request):                     #通过request参数接收前端ajax传过来的数据(格式是:{"user": "111","pwd":"111"})

    if request.method == 'POST':

        ret = {'status':False}

        user = request.POST.get('user',None)

        pwd = request.POST.get('pwd',None)

        if user == '' and pwd == '':

            ret['status'] =True

            return HttpResponse(json.dumps(ret),content_type="application/json")    #这里是后端处理数据,如果前段输入正确就把status置为true

        else:

             ret['status'] = False

             return HttpResponse(json.dumps(ret),content_type="application/json")

    return render(request,'login.html')

定义login.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>
　　<form id="jsStayForm">

    <div>

        <input type="text" name="user"/>

    </div>

    <div>

        <input type="password" name="pwd"/>

    </div>

    <input type="button" value="提交" onclick="SubmitForm()"/>
   {% csrf_token  %}
　　</form>

    <script src="/static/jquery.min.js"></script>

    <script>

        function SubmitForm() {

            $.ajax({

                url: "{% 'url' 'add_ask'  %}",

                type: 'POST',

                data: $('#jsStayForm').serialize() #自动获取id为jsStayForm表单的内容,然后序列化成json格式,比如{"user": "111","pwd":"111"},提交到后端

                dataType: 'json',

                success: function (callback) {   #success函数是后端处理完数据之后,return回来一个http响应,callback是形参,接收后端传回来的数据,这里就是return HttpResponse(json.dumps(ret))之后就执行success部分的函数,

                    if (callback['status']) {

                        console.log('登录成功')

                        location.href = "http://www.baidu.com";

                    } else {

                        alert('用户名或密码错误')

                    }

                }

            })

        }

    </script>

处理流程

当用户点击提交按钮之后,触发JavaScript的SubmitForm函数
SubmitForm函数获取用户在input的标签输入的值,并组合成一个字典,例如:{"user":1111,"pwd":222}
ajax把input_dict字典传到后端views中的login函数
views中的login函数通过request这个形参接收ajax传过来的input_dict字段
login函数进行判断,如果判断输入正确就把ret字典的status置为true("status":true),然后return给ajax,否则置为FALSE({"status":false}),然后return 给ajax
ajax如果发现有状态吗为200的返回就执行success函数
success函数通过callback这个形参接收后端给传过来的ret字典

ajax设置request对象header

背景:要给后端传数据,但不是把数据写在form表单里,是直接通过ajax提交数据,所以要在提交数据前设置request的header,加上csrf_token

ajax代码

function add_fav(current_elem, fav_id, fav_type){

    $.ajax({

        cache: false,

        type: "POST",

        url:"{% url 'org:add_fav' %}",

        data:{'fav_id':fav_id, 'fav_type':fav_type},

        async: true,

        beforeSend:function(xhr, settings){

            xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");

        },

        success: function(callback) {

            if(callback['status'] == 'fail'){

                if(callback['msg'] == '用户未登录'){

                    window.location.href="{% url 'login' %}";

                }else{

                    alert(callback['msg'])

                }

            }else if(callback['status'] == 'success'){

                current_elem.text(callback['msg'])

            }

        },

    });

}

Django学习系列之结合ajax的更多相关文章

Django学习系列之Form基础
Django学习系列之Form基础 2015-05-15 07:14:57 标签:form django 原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追 ...
Django学习系列6：使用selenium测试用户交互
学习系列5中的单元测试有报错信息,这儿来编写functional_tests.py文件,扩充其中的功能测试 # File: functional_test.py # Author: Rxf # Cre ...
Django学习系列之Form表单结合ajax
Forms结合ajax Forms的验证流程: 定义用户输入规则的类,字段的值必须等于html中name属性的值(pwd= forms.CharField(required=True)=<i ...
django学习系列——python和php对比
python 和 php 我都是使用过,这里不想做一个非常理性的分析,只是根据自己的经验谈一下感想. 在web开发方面,无疑 php 更甚一筹. 从某种角度来说,php 就是专门为 web 定制的语言 ...
Django学习系列之Python+Xadmin
项目树引入xadmin pycharm在项目中创建存放xadmin的目录右键项目名称-->pythonpackage-->输入名称:extra_app 拷贝xadmin代码到extra ...
Django学习系列之django restframework
曾几何时,Ajax已经统治了Web开发中的客户端,而REST成为web世界中最流行的架构风格(architecture style).所以我们的选择变得很简单:前端ajax访问后端的RESTful A ...
Django学习系列之CSRF
Django CSRF 什么是CSRF CSRF, Cross Site Request Forgery, 跨站点伪造请求.举例来讲,某个恶意的网站上有一个指向你的网站的链接,如果某个用户已经登录到 ...
Django学习系列之Form验证
django表单基础 django表单分类基于django.forms.Form:所有表单类的父类基于django.forms.ModelForm:可以和模型类绑定的Form Form验证流程定 ...
Django学习系列13:Django ORM和第一个模型
ORM—对象关系映射器,是一个数据抽象层,描述存储在数据库中的表,行和列.处理数据库时,可以使用熟悉的面向对象方式,写出更好的代码. 在ORM的概念中,类对应数据库中的表,属性对应列,类的单个实例表示 ...

随机推荐

jQuery核心语法
.each只是处理jQuery对象的方法,jQuery还提供了一个通用的jQuery.each方法,用来处理对象和数组的遍历 jQuery/($).each(array, callback )jQue ...
outlook 插件：导出rss的link地址
由于对于rss的应用程序不熟悉,所以使用Outlook接收rss.使用过程和平时收邮件没有什么差别. 唯一的遗憾是鉴于安全考虑,outlook没有全部下载网页,所以每次都要打开浏览器.有时候遇到一些需 ...
OpenFlow_tutorial_1_Introduce
tutorial出处:https://github.com/mininet/openflow-tutorial/wiki OpenFlow是用于远程控制交换机流表(forwarding tables) ...
C#反射的使用
1.先定义个类,编译成dll,用于调用 nameSpace Test{ public class Class1 { private string _name; private int _age; pu ...
简单说一下 TCP打洞和UDP打洞
1, TCP协议通信: 现在有两台电脑A和B.在假设A的地址为 192.168.0.100 假设B的地址为 192.168.0.102 A想给B发送一个字符串Hello, 如果A,B之间采用TCP ...
2019年，Linux运维行业的趋势，跟不上学习就被淘汰
运维行业经历了多年的发展,已经有了很大的变化,最开始的机房.网线.人肉,到现在一步步的自动化.智能化.容器化,运维人员的职业技能要求越来越高,稍不注意就可能被淘汰. 今天马小哥就来盘点一下2019年运 ...
notepad++新建文档时，会出现语法错误的红色下波浪线
notepad++新建文档时,会出现语法错误的红色下波浪线: 原因:新建文档时默认设置语言为PHP. 解决方法:修改默认语言为java或JavaScript,如下: 小结:打开文档时,也可能出现下波浪 ...
popToViewController
看到群里有人问popToViewController的用法就写了下了希望能帮到有需要的人 [self.navigationController popToViewController:[self. ...
librdkafka使用VS2015进行编译
抄了那么久的<kafka权威指南>,开始实操了,按照书本的介绍,kafka本身提供针对Java的原生API,其它语言如果需要使用kafka,那么就需要通过第三方库来做了,对了再书中一直提及 ...
linux上uwsgi+nginx+django发布项目
在发布项目前首先将部署环境进行搭建,尤其是依赖包一定需要提前安装. 一.虚拟环境的搭建 1.建议在linux下新建一个虚拟环境,这样有独立干净的环境. mkvirtualenv -p python3 ...