zoukankan      html  css  js  c++  java
  • 论js闭包的重要性

    很久没写博客了,今天发现了一个很有意思的问题,写下来分享一下

    话不多说,贴前端代码:

    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
    	$(function(){
    		$("#btnky").bind('click',function(){
    			 //发送给服务端
    			 var postMoney=getMoney();
    			 alert("发送给后台:"+postMoney);
    			 $.post("to_json.html",{postMoney:postMoney},function(data){
    				 alert(data);
    			 });
    		});
    	})
    	function getMoney(){
    			return 1; 
    	}
    </script>
    </head>
    <body>
    <input type="button" value="发送后台" id="btnky">
    </body>
    

     前端一个很简单的ajax提交代码,对不对?通过getMoney()函数 得到一个值,然后发送给后台,注意,该函数是不包含在$()代码块里面的

     后台代码:

     也是很简单的,只是响应用户的发送数据,代码如下:

    @RequestMapping("/to_json.html")
    @ResponseBody
    public String to_Json(@RequestParam("postMoney") int postMoney){
    	System.out.println("前端发送的钱:"+postMoney);
    	return "你给服务端发送的money是:"+postMoney;
    }
    

    OK,万事具备,页面走起!!

    页面点击发送

    看后台:

    貌似没错,后台如愿得到我们要的数据

    只是,如果有些捣蛋鬼喜欢捣蛋呢?比如我用火狐的firefox注入一个getMoney()方法

    好吧,我注入了一个和页面上相同的函数getMoney(),居然返回100000.太坏了..

    OK,让我们在点击发送后台按钮,看看是什么情况呢?

    天呐.......居然真给变了...

    好吧,再看看我们的服务端,是不是也会随波逐流呢?

    我已经无语了,这别个捣蛋鬼岂不是能随便传送数据...

    不然,如果页面修改一下呢?代码如下:

    <script type="text/javascript">
    	$(function(){
    		$("#btnky").bind('click',function(){
    			 //发送给服务端
    			 var postMoney=getMoney();
    			 alert("发送给后台:"+postMoney);
    			 $.post("to_json.html",{postMoney:postMoney},function(data){
    				 alert(data);
    			 });
    		});
    		function getMoney(){
    			return 1; 
    		}
    	})
    	
    </script>
    </head>
    <body>
    <input type="button" value="发送后台" id="btnky">
    </body>
    

    注意,这次我的getMoney()函数写在$()这个里面去了

    OK,我们在刷新页面,做相同的操作,注入一个getMoney

    很奇怪呢,居然没有变化,不放心,再看看后台:

    也没有变化,是不是很有意思呢?

    呵呵,各位有什么看法呢?畅所欲言哦

  • 相关阅读:
    【python系列】安装完PyCharm创建项目提示No Python interpreter selected
    银联支付测试
    【linux系列】linux防火墙的关闭开启
    【linux系列】vmware12pro安装centos7
    【linux系列】安装虚拟机时候的3中网络模式
    JavaBean与Map<String,Object>相互转换
    【CSS系列】布局篇
    【CSS系列】对表单和数据表格应用样式
    【CSS系列】图像映射
    【Linux系列】find命令使用
  • 原文地址:https://www.cnblogs.com/xiaoymin/p/4208929.html
Copyright © 2011-2022 走看看