<body>
<h1>攜帶參數的AJax</h1>
{% csrf_token %}
<label for="num1"></label>
<input type="text" id="num1">
+
<label for="num2"></label>
<input type="text" id="num2">
=
<label for="result"></label>
<input id="result" type="text">
<button class="cal">計算</button>
</body>
<script>
// 傳參Ajax請求
$(".cal").click(function () {
var num1 = $("#num1").val();
var num2 = $("#num2").val();
// 1.from表單無法傳遞json 只能通過ajax傳遞 json在django中至關重要
$.ajax({
url: "/cal/",
type: "post",
// 2.在傳遞json中 需要告知服務端你發送的請求,讓它按照要求解析,否則無法獲取到數值
contentType: "json",
// 3.在傳遞參數的時候需要將變量序列化
data: JSON.stringify({
num1: num1,
num2: num2,
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
}),
success: function (response) {
console.log(response);
$("#ret").val(response)
}
})
});
</script>
from django.shortcuts import HttpResponse def cal(request): # 1.這里request.body是將傳遞的json數據以字節的形式展現出來,因為服務器沒有反序列化的工具,這里需要自己解開 print(request.body) # b'num1=12&num2=23' b'{"num1":"23","num2":"34"}' print(request.POST) # <QueryDict: {'num1': ['12'], 'num2': ['23']}> <QueryDict: {}> # 2.反序列化取出json傳遞的數據 import json json_dict = json.loads(request.body.decode("utf8")) print(json_dict["num1"]) return HttpResponse("OK")