Django学习笔记-Ajax

最新推荐文章于 2023-06-29 17:39:23 发布

毛球饲养员

最新推荐文章于 2023-06-29 17:39:23 发布

阅读量216

点赞数

分类专栏： django 文章标签： jdango ajax

本文链接：https://blog.csdn.net/u012442157/article/details/79666333

版权

django 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Ajax实现页面无刷新

具体问题：
在前端有些数据要提交，但是没有form表单，所以要构建一个form表单，然后在提交。

一、HTML界面

<!DOCTYPE html>
<html>
<body>
<p>请输入两个数字</p>
<form action="/add" method="get">
    a: <input type="text" id="a" name="a"> <br>
    b: <input type="text" id="b" name="b"> <br>
    <p>result: <span id='result'>{{ result }}</span></p>
    <button type="button" id='sum'>提交</button>
</form>

<script src="static/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#sum").click(function(){
            var a = $("#a").val();
            var b = $("#b").val();
            test = {'a': a, 'b': b};

            $.ajax({
                type: "get",
                url: "/add",
                data: test,
                dataType : "json",
                success: function(respMsg){
                    alert(respMsg)
                    $('#result').html(respMsg)
                }
            });
        });
    });
</script>
</body>
</html>

二、views代码

def add(request):
    a = int(request.GET['a'])
    b = int(request.GET['b'])

    json_data = {'result': a+b}
    return JsonResponse(json.dumps(json_data), safe=False)