Django：Ajax(异步 javaScript and XML)

最新推荐文章于 2022-10-13 13:56:19 发布

飞行员红猪

最新推荐文章于 2022-10-13 13:56:19 发布

阅读量374

点赞数

分类专栏： Django

本文链接：https://blog.csdn.net/aixiangnan/article/details/90300018

版权

Django 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本文介绍了Ajax的基本概念、重要性、常见应用场景、优缺点及工作原理。Ajax是一种提升网页用户体验、实现局部刷新的技术，通过JavaScript与服务器交互，通常传输JSON数据。文章以Django为例，展示了在注册表单中利用Ajax进行信息校验和局部刷新的实际应用。

摘要由CSDN通过智能技术生成

一：Ajax含义，二：重要作用，三：常用应用场景，四：优缺点，五：原理，六：例子

一：Ajax含义： Asynchronous JavaScript And XML ,翻译是：异步 JavaScript and XML。Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。
使用的是 JavaScript 语言与服务器进行交互，传递的数据是XML格式现在也可以传输JSON（未来的趋势是用JSON进行轻量级的数据交换）。

Ajax目的：提高用户体验，较少网络数据的传输量，能够进行局部刷新

二：重要作用：
AJAX 和普通的传输数据方式，不同的是可以实现局部刷新功能。
三：Ajax 常见的应用场景:
（1）、搜索引擎根据用户输入的关键字、自动提示搜索内容。
（2）、表单验证是否登入成功、提示注册名是否已存在。
（3）、快递单号查询
四：优缺点：
优点： 1.异步向服务器发送请求，无需刷新整个界面。
缺点: 服务器压力比较大。

Ajax目的：提高用户体验，较少网络数据的传输量，能够进行局部刷新

五：原理
在这里插入图片描述

六：例子：进行注册时，信息的校验，局部刷新
templates:html模板：

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="{% static 'jquery-3.3.1.js'  %}"></script>
<form action="" method="post" >
    {% csrf_token %}
    <p>
        用户名：<input type="text" name="username" id="username_id">
        <span  id="error"></span>
    </p>
    <p>
        密码：<input type="password" name="passwd">
    </p>
    <p>
        <input type="submit" name="注册">
    </p>

</form>

//以下为ajax 前端代码
<script>
    $(function () {
            //离焦事件
        $('#username_id').blur(function () {
            //获取用户名
            var username=$('#username_id').val();
            console.log(username)
            //alert(username);
            //发送Ajax
            $.ajax({
                url:"/app01/lishan04_ajax/", //提交路径  
                type:"GET",  //提交方式 GET
                data:{'name':username}, //提交的数据
                success:function (msg) {//服务器正常响应，就会自动调用此函数，并且
                    //将后台的值 传递给msg形参
                    //alert(msg)
                    console.log(msg)
                    console.log(msg.result);
                    var value = msg.result;
                    if (value=='true'){
                        //alert('此用户已被注册')
                        $('#error').css({color:"red",background:'black'}).text('此用户已被注册！！！')
                    }
                    else{
                        //alert('可以注册')
                        $('#error').css({color:"blue",background:"yellow"}).text('可以注册')
                    }
                }
            })
        });
    })
</script>
</body>
</html>

视图：

#ajax
def lishan04_ajax(request):
    result = ''
    # 获取前端提交过来的数据，进行判断
    name = request.GET.get('name')
    if name == '李珊':
        result = 'true'  # 返回ture 表示此用户已经注册过
    else:
        result = 'false'  # 此用户没有注册过
    return JsonResponse({'result': result})

效果图：
当输入已注册的名字时立即显示此用户已被注册！！！
不需要刷新整个界面，实现局部刷新
在这里插入图片描述
当输入没有注册的名字立即显示可以注册