通过ajax的方式发送两个数据进行加法运算
html页面
<body>
<h3>index页面 </h3>
<input type="text" name="cal_1">+
<input type="text" name="cal_2">=
<input type="text" name="cal_3">
<button id="b2">计算</button>
<script src="/static/js/jquery.js"></script>
{#<script src="/static/js/ajax_setup.js"></script>#}
<script>
$("#b2").click(function () {
$.ajax({
url: "/cal2/",//提交的地址
type: "post",
//csrftoke 可以通过headers获取, 也可以通过data获取,选择一种发送方式
{#headers:{"X-csrftoken":$("[name=‘csrfmiddlewaretoken‘]").val()},#}
{#headers:{‘X-csrftoken‘:csrftoken,},#}
//(获取的是cookie里的token的值,跟上一行效果一样一样,但是要引src="/static/js/ajax_setup.js")
data: {
i1: $("[name=‘cal_1‘]").val(),//获取标签里的值
i2: $("[name=‘cal_2‘]").val(),
"csrfmiddlewaretoken": $("[name=‘carfmiddlewaretoken‘]").val(),
{#"csrfmiddlewaretoken":csrftoken,#}
//(获取的是cookie里的token的值,跟上一行效果一样一样,但是要引src="/static/js/ajax_setup.js")
},
success: function (response) {
$("[name=‘cal_3‘]").val(response) // 给cal_3赋值
},
error: function (response) {
},
})
});
</script>
</body>
csrf的发送可以在headers里面发送,也可以在data里面发送. 不管在哪发送,都有两种发送形式.
第一种方式就是直接在headers 或者 data 获取值,然后发送
$("#b2").click(function () {
$.ajax({
url: "/cal2/",//提交的地址
type: "post",
//csrftoke 可以通过headers获取, 也可以通过data获取,选择一种发送方式
headers:{"X-csrftoken":$("[name=‘csrfmiddlewaretoken‘]").val()},
data: {
i1: $("[name=‘cal_1‘]").val(),//获取标签里的值
i2: $("[name=‘cal_2‘]").val(),
"csrfmiddlewaretoken": $("[name=‘carfmiddlewaretoken‘]").val(),
第二种方式就是引入ajax_setup文件发送. 也是可以通过headers 或者 data
<script src="/static/js/ajax_setup.js"></script>
<script>
$("#b2").click(function () {
$.ajax({
url: "/cal2/",//提交的地址
type: "post",
//csrftoke 可以通过headers获取, 也可以通过data获取,选择一种发送方式
{#headers:{"X-csrftoken":$("[name=‘csrfmiddlewaretoken‘]").val()},#}
headers:{‘X-csrftoken‘:csrftoken,},
//(获取的是cookie里的token的值,跟上一行效果一样一样,但是要引src="/static/js/ajax_setup.js")
<script src="/static/js/ajax_setup.js"></script>
data: {
i1: $("[name=‘cal_1‘]").val(),//获取标签里的值
i2: $("[name=‘cal_2‘]").val(),
{#"csrfmiddlewaretoken": $("[name=‘carfmiddlewaretoken‘]").val(),#}
"csrfmiddlewaretoken":csrftoken,
//(获取的是cookie里的token的值,跟上一行效果一样一样,但是要引src="/static/js/ajax_setup.js")
},
在veiws都一样
#发ajax计算
def cal2(request):
i1=request.POST.get("i1","") # 如果有值就获取,如果没有值就默认获取空字符串 这里的i1 对应的是前端data 里面 i1:$("[name=‘cal_1‘]").val()的i1
i2=request.POST.get("i2","")
print("i1:",i1)
print("i2:",i2)
if i1 and i2:
i3=int(i1)+int(i2)
else:
i3=""
return HttpResponse(i3)
原文地址：https://www.cnblogs.com/kenD/p/10125962.html
时间： 2024-08-03 10:25:18