Django学习笔记-Ajax

简介: Ajax实现页面无刷新具体问题: 在前端有些数据要提交,但是没有form表单,所以要构建一个form表单,然后在提交。一、HTML界面请输入两个数字 a: b: result: {{ result }} 提交 $(document).

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)

三、urls.py

四、具体问题是需要上传一个文件

HTML界面

相关文章
|
7月前
|
JSON 前端开发 JavaScript
AJAX 课程学习笔记三
AJAX 课程学习笔记三
|
4月前
|
JSON 前端开发 JavaScript
Django入门到放弃之ajax
Django入门到放弃之ajax
|
6月前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
6月前
|
JSON 前端开发 JavaScript
Django——Ajax请求
Django——Ajax请求
|
7月前
|
Python
基于Django的Python应用—学习笔记—功能完善
基于Django的Python应用—学习笔记—功能完善
|
7月前
|
存储 数据库 数据安全/隐私保护
基于Django的Python应用——学习笔记
基于Django的Python应用——学习笔记
|
7月前
|
JSON 缓存 前端开发
AJAX 课程学习笔记二
AJAX 课程学习笔记二
|
7月前
|
XML 前端开发 JavaScript
AJAX 课程学习笔记一
AJAX 课程学习笔记一
|
7月前
|
JSON 前端开发 JavaScript
Django实践-04静态资源和Ajax请求
Django实践-04静态资源和Ajax请求
Django实践-04静态资源和Ajax请求
|
7月前
|
前端开发 JavaScript Python
Django 模板中使用 Ajax POST
Django 模板中使用 Ajax POST
64 0