Django——Ajax

Posted 2020-11-14 延小梁的笔记本

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Django——Ajax相关的知识，希望对你有一定的参考价值。

1.Ajax概述

对于WEB应用程序：用户浏览器发送请求，服务器接收并处理请求，然后返回结果，往往返回就是字符串（html），浏览器将字符串（HTML）渲染并显示浏览器上。

对比

1、传统的Web应用

一个简单操作需要重新加载全局数据

2、Ajax

　　AJAX，Asynchronous javascript and XML (异步的JavaScript和XML)，一种创建交互式网页应用的网页开发技术方案。

异步的JavaScript：

　　使用【JavaScript语言】以及相关【浏览器提供类库】的功能向服务端发送请求，当服务端处理完请求之后，【自动执行某个JavaScript的回调函数】

　　PS：以上请求和响应的整个过程是【偷偷】进行的，页面上无任何感知。

XML：

　　X

M

L是一种标记语言，是Ajax在和后台交互时传输数据的格式之一

Ajax的特点：

异步交互
浏览器页面局部刷新

Ajax的优点：

Ajax使用Javascirpt向服务器发送异步请求
Ajax无须刷新整个页面

同步交互与异步交互

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

Ajax可以做：

注册时，输入用户名自动检测用户是否已经存在。
登陆时，提示用户名密码错误
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。（博客园）

2.基于jQuery的Ajax实现

jQuery.ajax(...)

                部分参数：

                        url：请求地址
                       type：请求方式，GET、POST（1.9.0之后用method）
                    headers：请求头
                       data：要发送的数据
                contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
                      async：是否异步
                    timeout：设置请求超时时间（毫秒）

                 beforeSend：发送请求前执行的函数(全局)
                   complete：完成之后执行的回调函数(全局)
                    success：成功之后执行的回调函数(全局)
                      error：失败之后执行的回调函数(全局)
                

                    accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
                   dataType：将服务器端返回的数据转换成指定类型
                                   "xml": 将服务器端返回的内容转换成xml格式
                                  "text": 将服务器端返回的内容转换成普通文本格式
                                  "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
                                "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
                                  "json": 将服务器端返回的内容转换成相应的JavaScript对象
                                 "jsonp": JSONP 格式
                                          使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

下面是一个基于jQueryAjax实现登录的demo

模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>

<form id="form_login">
<input type="text" name="user" />
<input type="password" name="pwd" />
<span class="msg"></span>
<input type="button" class="btn-primary" value="提交">
</form>

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
    $(".btn-primary").click(function(){
        $.ajax({
            url: "/login/",
            method: "post",
            data: $("#form_login").serialize(),
            dataType: "json",
            headers:{"X-CSRFtoken": $.cookie("csrftoken")},
            success: function(data){
                if(data.status){
                    location.href="http://www.baidu.com"
                }else{
                $(".msg").html(data.msg).css({"color":"red"})
                }
            }
        })
    })
</script>

视图：

from django.http import JsonResponse

def login(request):
    data = {"status":True, "msg": ‘‘}
    if request.method == "POST":
        user = request.POST.get(‘user‘)
        pwd = request.POST.get(‘pwd‘)
        if user == "root":
            if pwd == "mima":
                return JsonResponse(data)
            else:
                data["status"] = False
                data["msg"] = "密码错误"
        else:
            data["status"] = False
            data["msg"] = "用户名错误"
    return JsonResponse(data)

以上是关于Django——Ajax的主要内容，如果未能解决你的问题，请参考以下文章

AJAX相关JS代码片段和部分浏览器模型

django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE的解决办法(转)(代码片段

Django + ajax（jquery）：http错误代码403（禁止）[关闭]

Javascript代码片段在drupal中不起作用

Django：AJAX + CSRF POST 给出 403