zoukankan      html  css  js  c++  java
  • 由JS函数返回值引发的一场”血案"

    ---恢复内容开始---

    啊。。。  本来昨天晚上想写来着,结果陪老婆看电视剧就忘了。。。 呢滴神啊,原谅我吧。

    背景:昨天在项目中做一个小功能的时候,出现了个小问题,而且一开始找了半天也没找到原因。问题是这样的:

    功能模块:库存模块

    具体业务:仓库出库

    功能:1、单个产品出库  2、批量产品出库(这些产品是连号的)

    问题出处:批量产品出库。

    具体实现:出库人员要输入产品的起始号码和结束号码,我在前台js做循环,为这些产品一个个出库,但是在出库前,我要判断输入的产品在库存中的状态,如果输入的这个产品的状态是不能出库的,那么此产品也不能出库。这时,一但有产品部能出库,我就要终止循环(为什么终止循环式根据业务要求,这里不多做解释了。我用ajax异步去判断每个卡号是否可以出库。

    代码如下:

    OrderStock.ValidataProductsWouldOouPut = function () {
            .........
            .........
    var startNum = 1; var endNum = 100; for (var i = startNum; i < endNum; i++) { var result = BeginValidateByNumber(i);

                if (!result) {
                alert("编号" + i + "出库失败");
               break;
               }

                }
            }
    
            function BeginValidateByNumber(_num) {
            ........   
            ........
    $.post(
    "url", { Num: _num }, function (data) { if (data.Success) { return true; } else { return false; } }); }

    //代码中的........代表前面的一些处理代码我就省略掉了

    可是函数BeginValidateByNumber每次的返回值都是个null的,就是result得到值一直都是undefined。我凑,我就郁闷了,不应该啊,js函数有返回值的我都用了好长时间了,也没出先这个问题啊。

    于是,经过笔者近一个小时的研究,终于发现问题的所在(其实这个问题挺二的,好吧,我也承认自己犯二了)。

    原因在哪呢,其实true或这false的确返回去了,但是代码中返回值 是 ajax中 function(data){}  这个毁掉函数的返回值。为了把这个问题说的更明白些,那就让我们看看jquery的ajax函数都干了点啥吧。

    下面代码是我模拟了一下jquery的ajax函数,只是简单的写了一下,并且可能有些实现和query的不同,但大概思想是没有错的。(请小伙伴没不要太较真。。。如果想在了解的清楚也行也可以去看jquery的源码 ^_^)。

    注:可能有的小伙伴经常直接$.post、$.get、$.ajax这么用,而从来没有去了解过异步具体是怎么回事,那么也希望这些小伙伴去了解一下xmlhttprequest这么个东东,当然这和我们这一节的最终讨论的问题不影响。

    MyJqueryForAjax.js文件:

     1 //--------------------------Begin ----------------------------------
     2 var defaults = {
     3     url: "default.ashx",
     4     data: "",
     5     type: "get",
     6     sussessfn: null,
     7     errorfn: null,
     8     async: true
     9 };
    10 
    11 if (!window.MyJQ) window.MyJQ = {};
    12 
    13 MyJQ.Ajax = function (settings) {
    14     var param = $.extend(defaults, settings);
    15     var xmlhttp;
    16     var jsonObject = param.data;
    17     var jsonStr = "";
    18     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    19         xmlhttp = new XMLHttpRequest();
    20     }
    21     else {// code for IE6, IE5
    22         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    23     }
    24 
    25     xmlhttp.onreadystatechange = function () {
    26         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    27             if (param.sussessfn) {
    28                 var result = param.sussessfn(xmlhttp.responseText);//注意这里,这里调用了回调函数sussessfn,并且得到返回值
    29                 alert("这里才是回调函数返回的值:" + result);
    30             }
    31         }
    32     }
    33     for (var item in jsonObject) {
    34         jsonStr += (item + "=" + jsonObject[item] + "&");
    35     }
    36     jsonStr = jsonStr.substring(0, jsonStr.length - 1);
    37 
    38     if (param.type == "get") {
    39         param.url += "?" + jsonStr;
    40         param.data = null;
    41     }
    42 
    43     xmlhttp.open(param.type, param.url, param.async);
    44     xmlhttp.send(param.data);
    45 };
    46 
    47 //---------------------------------end---------------------------

    前台页面:

     1 <html xmlns="http://www.w3.org/1999/xhtml">
     2 <head runat="server">
     3     <title></title>
     4     <script src="Script/jquery-1.9.1.js" type="text/javascript"></script>
     5     <script src="Script/MyJqueryForAjax.js" type="text/javascript"></script>
     6     <script type="text/javascript">
     7         $(document).delegate("#Btn_Test", "click", function () {
     8             var settings = {
     9                 url: "Handlers/TestHandler.ashx",
    10                 type: "get",
    11                 data: {
    12                     name: "xiaoming",
    13                     pwd: "123456"
    14                 },
    15                 sussessfn: function (data) {
    16                     alert(data);
    17                     if (data == "ok") {
    18                         return true;
    19                     }
    20                     else {
    21                         return false;
    22                     }
    23                 }
    24             };
    25             MyJQ.Ajax(settings);
    26 
    27         });
    28     </script>
    29 
    30 </head>
    31 <body>
    32     <form id="form1" runat="server">
    33     <div>
    34             <input type="button" value="Test"  id="Btn_Test"/>
    35     </div>
    36     </form>
    37 </body>
    38 </html>

    请求的Handlers/TestHandler.ashx的代码:

     1 context.Response.ContentType = "text/plain";
     2             var _request = context.Request;
     3             string name = _request.Params["name"];
     4             string pwd = _request["pwd"];
     5             if (string.Equals(name, "xiaoming") && string.Equals(pwd, "123456"))
     6             {
     7                 context.Response.Write("ok");
     8             }
     9             else {
    10                 context.Response.Write("no");
    11             }

    显示结果:

    我想不用我再多说什么,小伙伴们应该明白问题出在哪了吧^_^。

    对了 成功这个单词在代码中我写错了,不好意思哈。

    恩。。今天就到这吧,这篇文章可以给小伙伴们带来帮助,也希望小伙伴们不要犯类似的错误,同时也希望大伙伴们给出各种意见和建议,这里我要说一声very 3q。

    啊。。。还有如果代码中那块我写的不明吧,或者好伙伴们不理解,可以留言哦。

     源代码下载

  • 相关阅读:
    让IE6/IE7/IE8支持HTML5标签的js代码
    你应该抓紧学习Python,它是开发Web应用最强大的语言
    细数IE6的一串串的恼人bug,附加解决方法!
    邪恶的编码:复制与粘帖
    谈谈微信公众平台开发
    jQuery练手:仿新浪微博图片文字列表淡进淡出上下滚动效果
    DIV-CSS布局中position属性详解
    解决java编译错误:编码GBK的不可映射字符
    离线下载安装 NLTK 的 nltk_data 模块
    Python NLTK 自然语言处理入门与例程(转)
  • 原文地址:https://www.cnblogs.com/feng-c-x/p/3307560.html
Copyright © 2011-2022 走看看