通过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. WCF Rest用法
			
    GET GET单参数 服务器 [OperationContract] string GetOneParameter(string value); [WebInvoke(Method = "G ...
    
			
    2. 
						
  2. net share列出了Windows的默认共享（包括C盘）
			
    另外还有单独开启办法: 开启共享方法: 命令行方式:net share 博客=F:\娱乐\种子 我设置了一个名为“博客”的共享,路径为:“F:\娱乐\种子”. GUI方式:找到“F:\娱乐”的“种子” ...
    
			
    3. 
						
  3. Quora的技术探索
			
    关于问答类的应用,最早接触的是stackoverflow和知乎 ,而Quora作为知乎的原型,因为其创始人来自FaceBook而吸引了我.事实上关于Quora的技术分析,冯大辉和陈皓都已经有所详细的阐 ...
    
			
    4. 
						
  4. C/C++网络编程时注意的问题小结
			
    1.网络编程在自己定义结构体实现协议的时候,一定要注意字节对齐这个问题.否则sizeof和强制转换指针的时候都会出现很难发现的bug. 什么是字节对齐自行百度. #pragma pack (1)//字 ...
    
			
    5. 
						
  5. ORA-09925: Unable to create audit trail file
			
    当我修改ORACLE_SID为新的SID,想进行数据库还原时,用sqlplus报如下错误 [oracle@dbtest ~]$ sqlplus / as sysdba SQL Production : ...
    
			
    6. 
						
  6. UWP入门（四）--设置控件样式
			
    原文:UWP入门(四)--设置控件样式 官方定义:可以使用 XAML 框架通过多种方式自定义应用的外观. 通过样式可以设置控件属性,并重复使用这些设置,以便保持多个控件具有一致的外观. 可分享至不同e ...
    
			
    7. 
						
  7. 【码云周刊第 23 期】Web 高效开发必备的 PHP 框架（从这里学起）good
			
    码云项目推荐 1.项目名称:多功能 THinkPHP 开源框架 项目简介:使用 THinkPHP 开发项目的过程中把一些常用的功能或者第三方 sdk 整合好,开源供亲们参考,如 Auth 权限管理.支 ...
    
			
    8. 
						
  8. 浅谈网络I/O多路复用模型 select & poll & epoll
			
    http://blog.csdn.net/nk_test/article/details/50662946
    
			
    9. 
						
  9. 手机控制PPT good
			
    以前做了一个小东西,通过手机来控制PPT的翻页,最大化和最小化,东西很简单,近期整理电脑发现了拿来和大家分享一下 主要分为两个部分,客户端和服务器 客户端实现 当初考虑到跨平台的特性就选择了qt来写的 ...
    
			
    10. 
						
  10. DELPHI之关于String的内存分配(引)
			
    在函数.过程或者方法中定义一个字符串变量时,由于我们知道在函数.过程或者方法中定义的变量为局部变量,它的内存 是在栈中分配的,但是这里有个小细节我们要注意,对于一个局部的字符串变量,它的大小为4字节, ...
    
			
    11.