django的ajax_get请求

最新推荐文章于 2024-06-08 19:34:38 发布

天主极乐大帝

最新推荐文章于 2024-06-08 19:34:38 发布

阅读量538

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Django 文章标签： django的ajax_get请求

本文链接：https://blog.youkuaiyun.com/weixin_42218868/article/details/96323335

Django 专栏收录该内容

52 篇文章

订阅专栏

本文介绍了Ajax技术的基本概念，探讨了其相较于传统页面请求的优势，包括局部刷新和异步操作，提升了用户体验。通过一个具体的示例展示了如何使用jQuery实现Ajax GET请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、ajax
Ajax 介绍：AsynchronousJavascript and XML(异步的JavaScript和xml)。
普通请求，会携带整个页面提交，最明显的特征是刷新页面，并且请求可能阻塞整个服务。这样导致：
请求内容和响应内容冗余，
用户体验特别差。
基于以上的问题，后来出现了ajax请求。
1、ajax可以发起局部请求，页面整体可以不刷新，只是页面的局部刷新。
2、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请求的页面：
1、视图文件

from  django.http  import JsonResponse#json+httpresponse
def  ajax_get_data(request):
    result={"status":"error","content":""}#初始化一个返回结果的格式
    username=request.GET.get('username')#获取ajax_get请求过来的username
    print(username)
    if  username:#用户名不为空
        user=LoginUser.objects.filter(username=username).first()#查询数据库有没有和新输入的用户名一样的用户名
        print(user)
        if  user:#如果有1结果，证明用户名已经被使用
            result["content"]="用户名重复"
        else:#如果没有结果，证明用户名没有被使用，可以使用
            result["status"]="success"
            result["content"]="用户名可以使用"
    else:#如果用户名可以为空
        result["content"]="用户名不可以为空"
    return  JsonResponse(result)

2、静态页面 ajax_get.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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="tishi" 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",//请求的类型
                    success:function (data) {//请求成功的数据
                        var content=data.content;
                        $("#tishi").text(content)
                    },
                    error:function (error) {//请求失败的数据
                        console.log(error)
                    }
                }
            )
        }
    )
</script>
</body>
</html>

3、路由配置

path('ag/',ajax_get),
path('agd/',ajax_get_data),