天天看點

Django學習筆記-Ajax

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界面