通过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)
