通过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)ajax请求中 两种csrftoken的发送方法
原文地址：https://www.cnblogs.com/kenD/p/10125962.html