通过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的发送方法的更多相关文章
	

    
								
  1. AppCan中两种获取信息的方法
		
    <div id="newsInfo">正在加载...</div> 1.JSON格式: [{'R': '1','NOTI_ID': '9','NOTI_TIT ...
    
		
    2. 
						
  2. objective－C 中两种实现动画的方法
		
    第一种方法: [UIView beginAnimations:@"Curl"context:nil];//动画开始 [UIView setAnimationDuration:1.2 ...
    
		
    3. 
						
  3. objective－C 中两种实现动画的方法(转)
		
     转发自:http://wayne173.iteye.com/blog/1250232 第一种方法: [UIView beginAnimations:@"Curl"context: ...
    
		
    4. 
						
  4. [TestNG] Eclipse/STS中两种安装TestNG的方法
		
    Two Ways To Install TestNG in Eclipse/STS Today I install the newest Sprint Tool Suite and want to i ...
    
		
    5. 
						
  5. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用
		
    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
    
		
    6. 
						
  6. C#中Post请求的两种方式发送参数链和Body的
		
    POST请求 有两种方式 一种是组装key=value这种参数对的方式 一种是直接把一个字符串发送过去 作为body的方式 我们在postman中可以看到 sfdsafd sdfsdfds publi ...
    
		
    7. 
						
  7. 通过 Ajax 发送 PUT、DELETE 请求的两种实现方式
		
    一.普通请求方法发送 PUT 请求 1. 如果不用 ajax 发送 PUT,我们可以通过设置一个隐藏域设置 _method 的值,如下: <form action="/emps&quo ...
    
		
    8. 
						
  8. ASP.NET MVC 实现AJAX跨域请求的两种方法
		
    通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框 ...
    
		
    9. 
						
  9. .net中对HTTP请求的两种请求：Get和Post的操作
		
    .net中对HTTP请求的简单操作总结 第一部分,HTTP协议的简单了解 一.           什么是HTTP协议 超文本传输协议 (HTTP-Hypertext transfer protoco ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JQUERY名称冲突
			
    jQuery 使用 $ 作为符号 jQuery 介绍的简单方法. 其他 JavaScript 库函数(例 Prototype)使用相同的 $ 符号. jQuery 使用命名 noConflict()  ...
    
			
    2. 
						
  2. CefSharp For WPF隐藏滚动条
			
    效果:开始的时候会显示几秒,之后就不会再显示了 <!--浏览器--> <cefSharpWPF:ChromiumWebBrowser Name="webBrowser&qu ...
    
			
    3. 
						
  3. JS如何为iframe添加onclick事件
			
    如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的, 例如: $("#iframe1").click(function() ...
    
			
    4. 
						
  4. WPF，通过修改dataGrid的cell的style，改变选中行失去焦点时的颜色 4.0可用
			
    <Style TargetType="{x:Type DataGridCell}"> <Style.Triggers> <Trigger Proper ...
    
			
    5. 
						
  5. 图像滤镜艺术---保留细节的磨皮滤镜之PS实现
			
    原文:图像滤镜艺术---保留细节的磨皮滤镜之PS实现 目前,对于人物照片磨皮滤镜,相信大家没用过也听过吧,这个滤镜的实现方法是多种多样,有难有简,有好有差,本人经过长时间的总结,得出了一种最简单,效果 ...
    
			
    6. 
						
  6. WPF  特殊符号 字符绑定
			
    <Border xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=" ...
    
			
    7. 
						
  7. ShellExecute的跨平台实现OpenUrl
			
    OpenUrl 是 iOS 中 UIApplication 提供的一个函数,用于调用其它程序.实际上各个平台都有自己的实现,这里提供一个直接封装完的跨平台版本给大家.   uses {$IFDEF M ...
    
			
    8. 
						
  8. 可视化文件消息收发一体化Socket实现V0.1
			
    http://blog.csdn.net/laoyang360/article/details/8681918
    
			
    9. 
						
  9. Qt云服务/云计算平台QTC（Qt Cloud Services）入门（0）
			
    在这个“大数据”的时代,传统的跨平台C++库Qt已经将魔爪丧心病狂的伸向了“云计算”.在2012年的Qt开发者大会上,Qt发布了BaaS(Backend as a Service)服务——Engini ...
    
			
    10. 
						
  10. c#自定义业务锁
			
    我们有这样的使用场景,某个订单在修改信息的时候,其他人不能修改相关的信息,比如不能做支付,不能退单等等,那么我们可以根据单号进行加锁,多Monitor做了如下扩展 定义接口 //// 文件名称:ILo ...
    
			
    11.