Loading

Django-Ajax

目录

一、Ajax介绍

AJAX（Asynchronous Javascript And XML）翻译成中文就是 “ 异步的Javascript和XML ”。

  • Ajax不是新的编程语言，而是一种使用现有标准的新方法。
  • Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
  • Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上运行。

Ajax常见应用情景：

  • 搜索引擎根据用户输入的关键字，自动提示检索关键字。
  • 注册时候的用户名的查重。

优点：

  1. Ajax使用JavaScript技术向服务器发送异步请求
  2. Ajax请求无须刷新整个页面
  3. 应为服务器响应内容不再是整个页面，而是页面中的部分内容，所以Ajax性能高

两大特性

  • 异步请求：客户端发送一个请求后，无需等待服务器响应结束就可以发第二个请求
  • 局部刷新：（这一特点给用户感受是在不知不觉中完成请求和响应过程）

例子：通过Ajax请求判断用户名密码是否输入错误，并且不刷新网页，只在对应密码后面提示！，验证正确通过js跳转页面。

login.html 页面

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎登录页面</h1>

<form action="">
    {% csrf_token %}
    <label for="username">用户名：</label><input type="text" id="username">
    <label for="password">密码：</label><input type="password" id="password">
    <input type="button" value="确认" id="d1">
</form>

<script src="{% static 'js/jQuery.js' %}"></script>
<script>
    let state = true;
    $('#d1').click(function () {            // 触发点击事件
        $.ajax({
            url: "{% url 'login' %}",       // 请求地址
            type: 'post',                   // 请求方法
            data: {                         // 请求数据
                'uname': $('#username').val(),
                'pwd': $('#password').val(),
                'csrfmiddlewaretoken': '{{ csrf_token }}',  // post请求提交csrf_token数据
            },
            success: function (ret) {     // 获取返回参数并且自动序列化ret，并且执行function方法
                if (ret['state'] === 3) {
                    // 用户密码验证成功，进行跳转到服务器返回的指定地址
                    location.href = ret['url'];
                } else if (ret['state'] === 0) {
                    // 验证失败，创建标签并添加内容，插入到form表单之后,只插入一次。
                    if (state) {
                        const p = document.createElement("span");
                        p.innerText = ret['error'];
                        $('form').append(p);
                        state = false;
                    }
                }
            },
        })
    })
</script>
</body>
</html>

views.py 文件

from django.shortcuts import render, reverse
from django.http import JsonResponse
from django.views import View

class Login_view(View):

    def get(self, request):
        return render(request, 'login.html')

    def post(self, request):
        name = request.POST.get('uname')
        pwd = request.POST.get('pwd')
        if name == 'xiaoyang' and pwd == '123':
            data = {'state': 3, 'url': reverse('index')}
            return JsonResponse(data)  # 以json格式发送data字典
        else:
            data = {'state': 0, 'error': '用户名或密码错误'}
            return JsonResponse(data)


def index(request):
    return render(request, 'index.html')

二、Ajax参数

请求参数

date：

当前Ajax请求要携带的数据，是一个json的object对象，Ajax方法就会默认把它编码成某种格式

function f() {
    $.ajax({
        url: '/index/',
        type: 'get',
        data: {			// 此时data是一个json形式的对象
          'k1': 'v1',
          'k2': 'v2',
        },
    })
}

processData：

声明当前data数据是否进行转码或预处理，默认为true，即预处理；

如果是false，那么对data：{'k1':'v1', 'k2':'v2'} 会调用json对象的toString( ) 方法，也就是{'k1':'v1', 'k2':'v2'}.toString( )，最后得到一个[object, Object]形式的结果

function f() {
    $.ajax({
        url: '/index/',
        type: 'get',
        processData: false,
        data: {			// 此时data是[object,  Object]
          'k1': 'v1',
          'k2': 'v2',
        },
    })
}

contentType：

默认值："application/x-www-form-urlencoded"

是发送信息到服务器时内容编码类型，用来指明当前请求的数据编码格式；

比如：contentType："application/json"，向服务器发送一个json字符串。

function f() {

    $.ajax({
        url: '/index/',
        type: 'post',
        processData: false,
        data: {
            'k1': 'v1',
            'k2': 'v2',
        },
        contentType: 'application/json',
    })
}
// 一旦设定，data必须使json字符串，不能是json对象

// wiews.py 文件：json.loads(request.body.decode('utf8'))

响应参数

dataType：

把服务器返回的数据类型根据这个值解析后，传递给回掉函数。

默认不需要指定这个属性，Ajax会根据服务器返回的 content Type 来进行转换。

例如：

我们服务器响应的 content Type为json格式，这时Ajax方法就会对响应的内容进行一个json格式的转换，如果转换成功，我们在 success 的回调函数里就会得到一个json格式的对象：转换失败就会触发error这个回调函数。如果明确的指定目标类型，就可以使用 data Type。

dataType的可用值：html、xml、json、text、script

function f() {
    $.ajax({
        url: '/index/',
        type: 'get',
        dataType: 'json',
        data: {'obj': 'getjson'},
        success: function (ret) {
            console.log(ret);  // 此时会自动将返回的字符串转换成json对象。
        },
        error: function () {
            alert('转换失败！');
        }
    })
}

三、json时间格式转换

import json
from datetime import datetime
from datetime import date

# 对含有日期格式数据的json数据进行转换
class JsonCustomEncoder(json.JSONEncoder):
    def default(self, field):
        if isinstance(field,datetime):
            return field.strftime('%Y-%m-%d %H:%M:%S')
        elif isinstance(field,date):
            return field.strftime('%Y-%m-%d')
        else:
            return json.JSONEncoder.default(self,field)


d1 = datetime.now()

dd = json.dumps(d1,cls=JsonCustomEncoder)	# 转换
print(dd)
posted @ 2021-06-24 16:58  Mr-Yang`  阅读(67)  评论(0)  编辑  收藏  举报