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