（十八）Django中的Ajax请求

最新推荐文章于 2023-02-11 17:30:33 发布

孜孜孜孜不倦

最新推荐文章于 2023-02-11 17:30:33 发布

阅读量240

点赞数

分类专栏： Django 文章标签： ajax

本文链接：https://blog.csdn.net/z_ipython/article/details/96287436

版权

Django 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

（一）Ajax 请求

Ajax 介绍：Asynchronous Javascript and XML(异步的JavaScript和xml)。

普通请求:会携带整个页面提交，最明显的特征是刷新页面，并且请求可能阻塞整个服务。这样导致：

请求内容和响应内容冗余，
用户体验特别差。

基于以上的问题，后来出现了ajax请求。

①ajax可以发起局部请求，页面整体可以不刷新，只是页面的局部刷新。
②Ajax可以发起异步请求，请求的过程当中不会阻塞web正常操作和访问。

Ajax的兴起得益于Google公司的推广，Google公司在本公司大量的项目当中使用了ajax。这件事儿让微软公司感觉很尴尬，在1997年，微软公司就发明了ajax核心技术，1999年微软的ie5浏览器就开始兼容ajax对象(xmlhttpRequest),微软公司在后来就将ajax技术搁置了。

Ajax需要js语法进行编写，原生js的ajax比较复杂，因为各种浏览器对ajax对象的兼容是不一样的，使用js写ajax，首先要完成的是各种浏览器的ajax实例创建。比较繁复，所有我们通常用jq封装过的ajax。

Ajax get请求

小案例：
需要一个页面，但是需要两个视图。

页面：Ajax_get.html
导入jQuery并测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据校验</title>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body>
    <input id="username" type="text">
    <button id="valid" type="button">校验</button>
    <span id="ts" style="color: red;"></span>
    <script>
        $(function () {
            alert("hello")
        })
    </script>
</body>
</html>

第一个视图只是负责生成ajax请求的页面：

# 定义返回Ajax请求页面视图
def ajax_get(request):
    return render_to_response('Ajax_get.html')

第二个视图是为了处理ajax请求的视图，通常返回json，不返回页面

from django.http import JsonResponse # json+httpresponse
def ajax_get_data(request):
    result = {"status":"error","content":""} # 初始化一个返回结果的格式
    username = request.GET.get('username') # 获取ajax_get请求过来的username
    if username: # 用户名不为空
        user = models.Loginuser.objects.filter(user=username).first()
        if user: # 如果有结果，证明用户名已经被注册
            result["content"] = "该用户名已被注册"
        else: # 否则，用户名没有被注册，可以使用
            result["status"] = "success"
            result["content"] = "该用户名可以使用"
    else: # 用户名为空
        result["content"] = "用户名不可以为空！"
    return JsonResponse(result)

前端页面ajax源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据校验</title>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body>
    <input id="username" type="text">
    <button id="valid" type="button">校验</button>
    <span id="ts" style="color: red;"></span>
    <script>
        $("#valid").click(
            function () {
                var username = $("#username").val(); //获取输入的用户名
                var url = "/agd/?username="+username; //拼接url
                $.ajax( //发起Ajax请求，是jq Ajax的固定格式
                    { //ajax配置项必须在一个对象（字典）当中
                        url: url, //请求的路由
                        type: "get", //请求的类型
                        data: "", //请求携带的参数
                        success: function (data) { //请求成功的数据
                            var content = data.content; //获取data数据中的content字段内容
                            $("#ts").text(content); //将提示信息文本传给span标签
                        },
                        error: function (error) { //请求失败的数据
                            console.log(error)
                        }
                    }
                )
            }
        )
    </script>
</body>
</html>

添加路由
在这里插入图片描述
页面测试：

Ajax post请求

Ajax_post请求，涉及到post请求就会遇到csrf问题，ajax的post请求，同样需要发生csrf_token。
相比较get请求，post请求：
1、需要一字典格式整合数据
2、需要一个csrf_token，键必须是csrfmiddlewaretoken
其他部分和get请求类似

应用 form表单类（页面）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            list-style: none;
        }
        .errorlist {
            color: red;
        }
    </style>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body>
    <form class="register_form"> <!--此时就不要写method了，我们的请求方式要在ajax中做-->
        {% csrf_token %}
        {% for u in formuser %}
            <p>
                <label>{{ u.label }}</label>
                {{ u }}
            </p>
        {% endfor %}
        <p>
            <input id="submit" type="button" value="提交">
        </p>
    </form>
        <span id="ts" style="color: red"></span>
</body>
</html>

在这里插入图片描述

定义视图函数：
第一个视图只是负责生成ajax请求的页面：

def ajax_post(request):
    formuser = Formuser()# 实例化form表单，用于前端渲染,渲染出表单样式
    # 注意：只要涉及到post请求都使用render方法返回
    return render(request,"Ajax_post.html",locals())

第二个视图是为了处理ajax请求的视图，通常返回json，不返回页面
同样先导入from django.http import JsonResponse

from django.http import JsonResponse
def ajax_post_data(request):
    result = {"status":"error","content":""}# 初始化一个返回结果的格式,默认状态error，默认内容为空
    if request.method == 'POST':
        data = Formuser(request.POST)  # 将POST请求数据传递给Formuser进行校验
        if data.is_valid():  # 如果校验成功
            clean_data = data.cleaned_data  # 返回一个校验过的字典数据
            print(clean_data)
            data_user = models.Formuser()
            data_user.username = clean_data.get('username')
            data_user.password = clean_data.get('password')
            data_user.age = clean_data.get('age')
            data_user.email = clean_data.get('email')
            data_user.birthday = clean_data.get('birthday')
            data_user.save()
            result["status"] = "success"
            result["content"] = "数据保存成功"
        else:# 如果校验失败(长度，类型，字符不符合form表单规定)，则错误赋给content
            error = data.errors
            # data.errors是一个字典类型，键为字段；值为列表，里面存储每个字段详细错误描述
            errors = [v.strip('。') for e in error.values() for v in e]
            result["content"] = errors
            # result["content"] = data.errors
            # {'content': {'username': ['昵称违规']}, 'status': 'error'}
            print(errors) # ['输入一个有效的 Email 地址。', '输入一个有效的日期。']
            print(result)
            """
            {'status': 'error',
             'content': 
                 {'email': ['输入一个有效的 Email 地址。'], 
                  'username': ['昵称违规'], 
                  'birthday': ['输入一个有效的日期。']
                  }
             }
             """
    else:
        result["content"] = "请求类型错误"
    return JsonResponse(result)

前端页面ajax完整页码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            list-style: none;
        }
        .errorlist {
            color: red;
        }
    </style>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body>
    <form class="register_form">
        {% csrf_token %}
        {% for u in formuser %}
            <p>
                <label>{{ u.label }}</label>
                {{ u }}
            </p>
        {% endfor %}
        <p>
            <input id="submit" type="button" value="提交">
        </p>
    </form>
        <span id="ts" style="color: red"></span>
    <script>
        $("#submit").click(
            function () {
                //收集数据
                var username = $("#id_username").val();
                var password = $("#id_password").val();
                var age = $("#id_age").val();
                var email = $("#id_email").val();
                var birthday = $("#id_birthday").val();
                var csrfmiddlewaretoken = '{{ csrf_token }}';
                send_data = {
                    "username": username,
                    "password": password,
                    "age": age,
                    "email": email,
                    "birthday": birthday,
                    "csrfmiddlewaretoken": csrfmiddlewaretoken,
                };

                var url = "/apd/";
                $.ajax(
                    {
                        url: url,
                        type: "post",
                        data: send_data,
                        success: function (data) {
                            //console.log(data)
                            var content = data.content
                            $("#ts").text(content)
                        },
                        error: function (error) {
                            console.log(error)
                        }
                    }
                )
            }
        )
    </script>
</body>
</html>

form表单类自动生成的id为id_字段名
在这里插入图片描述
添加ajax post请求及数据处理路由

页面测试（ajax post请求、提示、数据写入）

数据库数据是否写入：

再次测试错误类型

这是由于自定义了校验方法：

孜孜孜孜不倦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
（十八）Django中的Ajax请求

（一）Ajax 请求Ajax 介绍：Asynchronous Javascript and XML(异步的JavaScript和xml)。普通请求:会携带整个页面提交，最明显的特征是刷新页面，并且请求可能阻塞整个服务。这样导致：请求内容和响应内容冗余，用户体验特别差。基于以上的问题，后来出现了ajax请求。①ajax可以发起局部请求，页面整体可以不刷新，只是页面的局部刷新。...
复制链接

扫一扫