Web关于Jq的ajax异步返回的数据处理问题

任志强来晚了 发布于 2017/05/13 12:12
阅读 255
收藏 0

请问大神,红色标记的变量goodsObjArr,如果前面加上var, 点击button,报错(for循环里)如下:

,也就是button绑定的点击事件。如果把var去掉,则一切正常()。如果把async设成false,还是报错。例外,这两个名字就算不一样也会报错,求解释!

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            -webkit-text-stroke-width: 0px;
            -moz-text-stroke-width: 0px;
            -o-text-stroke-width: 0px;
            -ms-text-stroke-width: 0px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
        }
        body {color: #000;
                font-size: 12px;
            background: #fff;}

        a {
            color: #000;
            font-size: 12px;
            text-decoration: none;
            blr:expression(this.onFocus=this.blur());
        }
        a:hover {
            color: #FF5c00;
        }
        img {
            vertical-align: middle;
            border: 0;
            outline: none;
        }
        div, p, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, table {
            display: block;
            width: auto;
            height: auto;
        }
        .outer_con {
            float: left;
            width: 1151px;
            margin: 10px 10px 0 0;
            padding: 20px;
            border: 1px solid #ccc;
        }
        ul {
            float: left;
            width: 1131px;
        }
        ul:after {
            clear: both;
            display:block;
            height: 0;
            content: '';
            visibility: hidden;
        }
        ul li {
            float: left;
            list-style: none;
            width: 377px;
            height: auto;
            margin-bottom: 20px;
        }
        ul li a {
            display: block;
        }
        ul li .img {
            width: 357px;
            height: 357px;
            border: 1px solid transparent;
            overflow: hidden;
        }
        ul li .img:hover {
            border-color: #FF5c00;
        }
        ul li .img img:hover {
            transform: scale(1.1);
            transition-duration: 2s;
        }
        ul li .title {
            font-size: 15px;
            line-height: 40px;
            text-align: left;
        }
        ul li span {
            padding-top: 2px;
            margin-right: 20px;
            font-size: 16px;
            font-weight: bold;
            line-height: 22px;
            color: #FF5c00;
        }
        button {
            width: 85px;
            line-height: 22px;
            text-align: center;
            background: #fff;
            border: 1px solid #ccc;
            outline: none;
            cursor: pointer;
        }
        ul li .add_goods:hover {
            border: 1px solid #FF5c00;
            box-shadow: 3px 1px 2px #ccc;
        }
        .save_goods {
            float: left;
            width: 200px;
        }
        .save_goods p {
            height: 30px;
            line-height: 30px;
        }
        .save_goods p span {
            vertical-align: top;
            margin: 0 5px;
            font-size: 20px;
            font-weight: bold;
            color: #FF5C00;
        }
    </style>
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
<div class="outer_con">
    <ul id="goodCon"></ul>
</div>
<div class="save_goods">
    <p>购物车里有<span>0</span>件商品</p>
    <button onclick="goToCar()">去购物车结算</button>
</div>
<script>
    //存放商品的容器
     goodObjArr =[];
    
    //加入到购物车的商品数
    var a=0;
    function addToCar(goodObj) {
        a++;
        //更新商品数量
        $('.save_goods span').text(a);
        //指示是否添加新商品
        var counter=0;
        //判断是否是相同的商品
        for (var i = 0;i<goodObjArr.length;i++) {
            if (goodObjArr[i].wareId!= goodObj.wareId) {
                counter++;
            } else {
                goodObjArr[i].buyCount++;
            }
        }
        //更新购物车数量
        if(counter==goodObjArr.length) {
            goodObj.buyCount=1;
            goodObjArr.push(goodObj);
        }       
        //缓存
        if(window.sessionStorage){
            sessionStorage.setItem('good', JSON.stringify(goodObjArr));
        }       
    }
    //去结算
    function goToCar() {
        window.location = 'Car.html';
    }   
           $(function(){ $.ajax({
            url:'http://120.27.25.57/data/jd.json',
            type: 'get',
            async: 'true',
            cache: 'false',
            timeout: '2',
            contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
            dateType: 'json',
            statusCode: {
                404: function () {
                    alert('page not found');
                }
            },
            success: function (goodsData) {
               var  html="";
               var  goodsObjArr = goodsData.value.wareList.wareList;
                for (var i = 0; i < goodsObjArr.length; i++) {
                    html += '<li><a class="img" href=""><img src=' + goodsObjArr[i].longImgUrl + '></a>'
                            + '<a class="title" href="">' + goodsObjArr[i].wname + '</a>'
                            + '<span>¥' + goodsObjArr[i].jdPrice + '</span>'
                            + '<button class="add_goods" onclick="addToCar(goodsObjArr[' + i + '])">加入购物车</button></li>';
                }
                $('#goodCon').html(html);
            },
            error: function () {
            }
        })
    })
</script>
</body>
</html>

加载中
0
confused_man
confused_man

加上var后就变成局部变量, 看你的代码, 此处应该作为全局变量

confused_man
confused_man
你看你的第一个变量
任志强来晚了
任志强来晚了
我就是想知道,为什么必须是全局变量?
0
悠悠知我心
这种应该是属于js变量提升, 先使用,后声明。 你把goodObjArr =[]这个去掉就行了
返回顶部
顶部