<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")