Django Template 13.AJAX语法

最新推荐文章于 2022-10-06 17:46:22 发布

happy-cop

最新推荐文章于 2022-10-06 17:46:22 发布

阅读量375

点赞数 1

分类专栏： # django 文章标签： python django

本文链接：https://blog.csdn.net/weixin_42665546/article/details/105479728

版权

django 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

文章目录

简易ajax
- get请求
- post请求
普通ajax写法：异步改同步
- 通过延时证明简写是异步
- 改同步时，简写要改为普通写法

简易ajax

get请求

先写url和view

    path('get/', views.get_view),

def get_view(request):
    uname = request.GET.get('uname')
    pwd = request.GET.get('pwd')
    print(uname, pwd)
    return JsonResponse({'flag': True})

引入jquery时，可以引用静态资源库https://cdn.baomitu.com/jquery，百度那个找不到了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://lib.baomitu.com/jquery/latest/jquery.min.js"></script>
    <script>
        function getAjax() {
              {#可以写一起，用&隔开，也可以传输json#} 
              $.get('/stu/get/','uname=zhangsan&pwd=123',function(result){
                alert(result)
            })
        }
    </script>
</head>
<body>
<input type="button" value="get请求" onclick="getAjax()"/>
</body>
</html>

整个ajax的功能，就是不刷新的方式，将用户名和密码传递给路径/stu/get，然后按url执行view，传递一个json数据，{名称：值}，即result，名称是flag，值是true

用弹框来测试result值，当写alert(result)时，返回object Object
当alert(result.flag)时，返回true

在这里插入图片描述

在这里插入图片描述
，即print用户名和密码

post请求

post请求，把刚才的get改成post，这时需要加CSRF了，因为默认是禁止POST的
里面写上csrf_token，然后通过jquery的$来获得csrfmiddlewaretoken隐藏值，通过字符串拼接的方式把这个值加进去

注意字符串的’’+拼接方法
隐藏值的value，要通过写input和name来获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://lib.baomitu.com/jquery/latest/jquery.min.js"></script>
    <script>
        function getAjax() {
            var token = $('input[name="csrfmiddlewaretoken"]').val()                 $.post('/stu/get/','uname=zhangsan&pwd=123&csrfmiddlewaretoken='+token,function(result){
                alert(result.flag)
                alert('helloajax')
            })
        }
    </script>
</head>
<body>
{% csrf_token %}
<input type="button" value="get请求" onclick="getAjax()"/>
</body>
</html>

普通ajax写法：异步改同步

通过延时证明简写是异步

在views返回前，加5秒延时，在网页ajax后面加个alert，则先执行后面的alert，再执行ajax的获取信息alert，说明是异步的
以前的网页提交是同步的，即先等待前面的延时获取信息，再执行后面的

def get_view(request):
    uname = request.POST.get('uname')
    pwd = request.POST.get('pwd')
    print(uname, pwd)
    time.sleep(5)
    return JsonResponse({'flag': True})

<script>
    function getAjax() {
        var token = $('input[name="csrfmiddlewaretoken"]').val()                 $.post('/stu/get/','uname=zhangsan&pwd=123&csrfmiddlewaretoken='+token,function(result){
            alert(result.flag)
            alert('helloajax')
        })
    }
</script>

在这里插入图片描述

改同步时，简写要改为普通写法

改为同步要用原来的jquery ajax写法，稍微复杂，但比js的简单很多
在网页里增加一个同步按钮，写getAjax2方法，对应getajax有path和view；
注意这里传递的是json格式

可以明显看出来：
异步就是一起开始，如果前面要等待，后面就先开始；
同步是要等待前面的做完才做后面的。

path('getajax/', views.getAjax_view),
def getAjax_view(request):
    uname = request.GET.get('uname')
    print(uname)
    return JsonResponse({'flag': False})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://lib.baomitu.com/jquery/latest/jquery.min.js"></script>
    <script>
        function getAjax() {
            var token = $('input[name="csrfmiddlewaretoken"]').val();           $.post('/stu/get/','uname=zhangsan&pwd=123&csrfmiddlewaretoken='+token,function(result){
                alert(result.flag)
            });

            alert('helloajax')
        }
        function getAjax2(){
            $.ajax({
            {#默认是异步，false是同步#}
                async:false,
                url:'/stu/getajax/',
                type:'GET',
                {#这里是刚才说的json格式#}
                data:{'uname':'lisi'},
                success:function(result) {
                    alert(result.flag)
                }
            });
	        alert('getajax...')
        }
    </script>
</head>
<body>
{% csrf_token %}
<input type="button" value="get请求" onclick="getAjax()"/>
<input type="button" value="getajax请求" onclick="getAjax2()"/>
</body>
</html>