通过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. Token的设计(2)
			
    词法分析 Token的几个种类 前端的第一步就是词法分析, 这个过程通俗来讲就是将源代码转化为一串Tokens. 所以首先应该想到的是, 到底该有哪几种类型的Token ? 关于这个问题我已经想过了, ...
    
			
    2. 
						
  2. 使用NEWSEQUENTIALID解决GUID聚集索引问题
			
    原文:使用NEWSEQUENTIALID解决GUID聚集索引问题 UNIQUEIDENTIFIER做主键(Primary Key)是一件很方便的事情,在数据合并等操作中有不可替代的优势 但是由于普通的 ...
    
			
    3. 
						
  3. Resolve conflict using "MERGE_HEAD (origin/HEAD)"
			
    Git进行同步的时候,经常会出现冲突,有时候冲突的选项会有图示中的三种选项: 1.Resolved:直接把文件标识为冲突已经解决,一般是自己手动查看并解决完冲突以后使用. 2.Resolve conf ...
    
			
    4. 
						
  4. Android零基础入门第23节：ImageButton和ZoomButton使用大全
			
    原文:Android零基础入门第23节:ImageButton和ZoomButton使用大全 上一期我们学习了ImageView的使用,那么本期来学习ImageView的两个子控件ImageButto ...
    
			
    5. 
						
  5. UWP入门（一） -- 先写几个简单控件简单熟悉下(别看这个)
			
    原文:UWP入门(一) -- 先写几个简单控件简单熟悉下(别看这个) 1. MainPage.xmal <Grid Background="{ThemeResource Applica ...
    
			
    6. 
						
  6. ThreadPoolExecutor的一点理解  专题
			
    corePoolSize(maxActiveThreadSize):线程池大小,决定着新提交的任务是新开线程云执行还是放到任务队列中,也是线程池的最最核心的参数.一般线程池开始时是没有线程的,只有当任 ...
    
			
    7. 
						
  7. WPF四年，尤不足以替代WinForm
			
    WPF四年,尤不足以替代WinForm WPF出山已四年,作为官方内定的下一代UI系统掌门,没少露脸.但这个新掌门能否胜任,仍是众多开发者的心头之虑.通过对VisualStudio 2010的编辑器部 ...
    
			
    8. 
						
  8. Linux 下配置 phpredis 的过程和遇到的问题
			
    其实对于 Linux 系统和 LNMP 环境并不是很熟,如果有错误请指正. 一.关于 PHP PHP 的编译参考了此文:http://blog.aboutc.net/linux/65/compile- ...
    
			
    9. 
						
  9. HTML续
			
    HTML class属性 定义和用法 class 属性规定元素的类名(classname). class 属性大多数时候用于指向样式表中的类(class).不过,也可以利用它通过 JavaScript ...
    
			
    10. 
						
  10. Alwayson架构下 服务器 各虚拟IP漂移监控告警的功能实现
			
    1.需求概括 我们知道,在SQL Server Alwayson 架构中,有多种虚拟IP,例如 WindowsCluster IP,ListenIP,角色高可用性IP(类似于侦听IP).在某些条件下, ...
    
			
    11.