django中的ajax

Posted 2021-04-15 SRE运维实践

    

1背景概述

    

    在现在的web场景中，越来越多的使用到异步加载，本篇文章主要用来给出一个最基本的例子，关于使用JQ的ajax请求的发送。

    

    在django中，发送异步请求的时候，get请求和其他的框架基本是一样的，不需要发送其他额外的信息，但是在使用post请求的时候，需要考虑到的是，django一般开启了跨站攻击防护的选项，也就是csrf_token，从而在进行post请求的时候，也必须传过去这个值。

2视图函数

    视图函数的内容如下所示：

def restartoperation(request):

    if request.is_ajax():

        if request.method== "POST":

            print request.POST

            return HttpResponse('HEllo')

    

        判断一个请求是否是ajax请求的主要目的，就是对于这同一个方法，使用ajax请求的时候，可能只需要传输部分的信息，也可能是返回不同的结果，从而使用is_ajax来进行判断，如果对于ajax请求没有特殊的要求，那么无需进行判断。

3路由映射

    

    在django中，将url路径映射到处理的函数，也就是vies中的方法，主要就是路由了，也可以称之为映射，就是一个url对应于一个views方法。如下：

url(r'^restartoperation/$',restartoperation,name='restartoperation'),

4页面JS脚本

    在使用ajax请求的时候，其实最主要的感觉就是页面js的写法，因为这算是前端的活了，界面上的主要js脚本和元素如下所示：

<script>

(function($) {

    $('#restart').click(

    function () {

        var csrf = $("input[name=csrfmiddlewaretoken]").val(); 

        var hostip = $('#hostip').html();

        alert(hostip);

        request = {'csrfmiddlewaretoken':csrf,'hostip':hostip}

        $.ajax({

            type: "POST",

            url: "/webcms/restartoperation/", 

            data: request,

            context: document.body,

            success: function(date){

                if(date == ""){ alert("未查找到对应的IP")};

                $('#result').html(date);

            }

        });

    })

})(jQuery);

</script>

    form表单：

    页面上显示结果的地方如下所示：

    

    传递的参数如下：

5测试结果

总结

1、django中的ajax请求，当使用post方法的时候，必须要添加form标签里的csrfmiddlewaretoken的值，否则的话，会出现403的结果，会直接被中间件进行forbidden连接。

2、 在使用ajax请求的时候，可以使用get请求，也可以使用post请求，当使用get请求的时候，是将相关的参数封装在url中，并且传输的数据大小是有限制的，使用post的请求的时候，数据是存放在表单form中传输，传输的数据大小没有限制。

3、在进行ajax请求交互的时候，可以直接给出html页面，也可以给出json数据，可以限定返回值的类型，从而做出相应的东西，在例子中，给出的是html代码。

4、 可以改进的地方，在url的地方可以换成tag的形式，从而更加灵活。