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 == '111' and pwd == '222':
            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'])
            }
        },
    });
}