通过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. .net与.net core学习目录
			
    .net C#调用python 模拟请求(模拟header/gzip解压/泛型) C#控制台关闭之前做一些操作 C# 元组.匿名对象.ref&out DataTable转换为Entity(反射 ...
    
			
    2. 
						
  2. jquery表单过滤器
			
    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
    
			
    3. 
						
  3. Mvvm Light Toolkit 入门
			
    原文:Mvvm Light Toolkit 入门 前言 之前学习UWP的时候就一直看到有关MVVM的资料但是一直没有系统的去学,最近正好有时间,特地来攻破这个点,顺便学习一下VS与GitHub的链接和 ...
    
			
    4. 
						
  4. php如何判断 0.0/0.00/0.000 是否为空？ 测试过用empty函数不行
			
    if ( (int) $number == 0) echo 'empty'; if ( floatval($number) == 0 ) echo 'empty' 首先,PHP 认为 0.0 是空,同 ...
    
			
    5. 
						
  5. SQL 时间格式化函数发布
			
    SQL 时间格式化函数,有时候因某种需要需要格式化成需要的时间格式,需要的朋友可以收藏下,以备后用. SQL Server里面可能经常会用到的日期格式转换方法: sql server使用convert ...
    
			
    6. 
						
  6. Windows应用程序文件说明
			
    bin文件夹:包含debug子目录,含有.exe可执行文件和pdb文件,其中pdb文件包含完整的调试信息(包含函数原型): obj文件夹:包含debug子目录,含有编译过程中生成的中间代码. Prop ...
    
			
    7. 
						
  7. SYN1621型 定位定向授时设备
			
    SYN1621型 定位定向授时设备 定位定向授时设备使用说明视频链接: http://www.syn029.com/h-pd-274-0_310_39_-1.html 请将此链接复制到浏览器打开观看  ...
    
			
    8. 
						
  8. hadoop之hive集合数据类型
			
    除了string,boolean,date等基本数据类型之外,hive还支持三种高级数据类型: 1.ARRAY ARRAY类型是由一系列相同数据类型的元素组成,这些元素可以通过下标来访问.比如有一个A ...
    
			
    9. 
						
  9. Alwayson架构下 服务器 各虚拟IP漂移监控告警的功能实现
			
    1.需求概括 我们知道,在SQL Server Alwayson 架构中,有多种虚拟IP,例如 WindowsCluster IP,ListenIP,角色高可用性IP(类似于侦听IP).在某些条件下, ...
    
			
    10. 
						
  10. 在centos7上安装Docker CE
			
    Docker CE的基本安装 https://docs.docker.com/engine/installation/linux/docker-ce/centos/ 一.系统要求 1.安装Docker ...
    
			
    11.