老师json文件获取不到

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        .cart {
            position: relative;
        }
        .cart-title {
            position: absolute;
            width: 200px;
            line-height: 50px;
            left: 207px;
            top: 7px;
            background-color: #f00;
            color: #fff;
            z-index: 1;
        }
        .cart-title span:first-child {
            padding: 0 18px;
        }
        @font-face {
            font-family: "iconfont";
            src: url('font/iconfont.eot?t=1591350212095'); /* IE9 */
            src: url('font/iconfont.eot?t=1591350212095#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARgAAsAAAAACOgAAAQSAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqEaINxATYCJAMUCwwABCAFhG0HZhubB8gehXEsLBShXb2VvYuH/9/v2z5X3ldpI4pGVtfmaRbNPNEIUSyRKhEioXoUD3F+eE97XcbMygmTkUV1eml6YHvndhBOwBfgP361AQIiiF8cqmaKz7dYnObYlAsGMDSBYrExd4u9irQgFfUuw2tdqsPeTaBr1VKC06nZxWCqIIMC8UDE4GCakCsVqaEtNAUzi3gFRtrpscFdAC+934/fEJgpSc3IyIu3UkiI/+b5qRlR69WqHQQwhtOCn0fGUaAQDwv1DyCB/yhEV21v6DjQ1ZakoZolfCr/1KzXE7E3JOzSf3hkRRJEg/D7GHs8UPjmaZHJfEugFwnKQSqBoBmY18KvzowuRngD4AMQ4baX2RZC7QVFrv2p1URgFoODxORZ9TndBc35+QLBIPr0M1bH73tVlnZPO6Ha3Zo9zubH7nmWVHRNmVs/3aXeiQquaXf373EmdDPOVQNO3U5WNU6wPraoa8ilfPBucD3xqPTy4xyKefAwntyplVjUQa0LGGqq75UX09NaAu3bpduj2a3diaPqvindzICmv+CMyV5JN2q11396Pqrdqd41z7yry7Gm79Q8y5l6OajF626n2UTPZFmH6+IOBoUGhVnlowDvoq/6b4rFJIWs8zrkbj26yNLW3fbiIv/YQs9DoRtQ6257OHG3s4KvGyxtXJGLh7wtvNFAb9DR6sWNXr44X/f6lFMgluDjf9AbrsmfvnnylijOW7ippbVtYXE+celKYgQ8ZptbwGc+3jRDud5+V2husfaFbkGkiT4A2tEukdb/D3gd+Or91Tnrv9coZqg2Ky1xV7Tb0XNoG0nrd5dEn/C81gsQ/xbboWXPnKUPXEY90rd69dnASoD9i8gVJF7/HaBMDU4CkN8baAD2byJPkbj/4DD3LjcfrLOO/m1qXsAnCL7XRf9df9HQDokHeJkCjRlvXVqgAvGLrbGIohaFp5IVdRGoLjHVjIkXnPeuzVOvhhEv7qM2tBMMHpKWFcjatpEFexSqnmOORtsWk+k6Ig3m98xwEFE6OGwLgjB2AJKht5CN3UMW7Euoln5CYxwCXXthv2LPbiI0iaNwniKxhlWYiGDltKniUT+1kGJUUpyLszxcKcUpRS4swNc/HUqj5BQ3xBjlciaQ52mM5lgZlor2o6RSFlNwrJgieF8hzysi/fzook/yJVgZoE7hUHA8CgnTYBWMCIElRzuleWjm5wtRGCpSOK6ioEpZisJREjWOCeDLvwEyjS9vVHAp9ygtxwjE49EwNA5LBpOKtBQp9bMwiuJuYhQCz5ewg1chkh8uRjfl+04vlN3jOugiL6mRIkeJGo3+I1IlYljVChUhpCxxkQ/OcewKH9JqJbcQi3A5z6qUQlfLWPGxSELIypmVIqzzAQAAAA==') format('woff2'),
            url('font/iconfont.woff?t=1591350212095') format('woff'),
            url('font/iconfont.ttf?t=1591350212095') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
            url('font/iconfont.svg?t=1591350212095#iconfont') format('svg'); /* iOS 4.1- */
        }
        .cart-title:before,
        .cart-title i,
        .cart-layer::before {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .cart-title::before {
            content: "\e641";
            padding: 0 18px;
        }
        .cart-title i {
            padding-left: 20px;
            font-size: 10px;
        }
        .cart-shadow {
            display: none;
            position: absolute;
            width: 200px;
            height: 50px;
            left: 207px;
            top: 7px;
            box-shadow: 0 0 5px 2px rgba(0, 0, 0, .2);
        }
        .cart-layer {
            display: none;
            position: relative;
            width: 250px;
            background-color: #fff;
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, .4); 
            position: absolute; 
            top: 59px;
            left: 7px;
            padding: 50px 0 50px 150px;
        }
        /* .cart-layer::before {
            content: "\e68e";
            position: absolute;
            top: 62px;
            left: 95px;
            font-size: 40px;
            color: rgb(197, 195, 193);
        } */
        .cart-layer div {
            position: absolute;
            width: 32px;
            height: 32px;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            background: url(img/loading.gif) no-repeat;
        }
        .cart-layer p:first-child span{
            display: block;
            margin: 0 20px 0 10px;
            border-bottom: 1px solid #a3a2a2;
            padding: 20px 10px;
        }
        .cart-layer p a {
            display: block;
            position: relative;
            line-height: 32px;
            margin: 0 10px;
            padding: 10px 0 10px 80px;
            border-bottom: 1px solid #a3a2a2;
            color: #000;
        }
        /* .cart-layer p a img {
            position: absolute;
            left: 15px;
            top: 18px;
            width: 50px;
            height: 50px;
        } */
        .cart-layer p a i {
            font-style: normal;
            margin-left: 80px;
        }
        .cart-layer p a span {
            font-weight: bold;
        }
        .cart-layer p:last-child {
            position: relative;
            line-height: 80px;
            padding: 0 20px;
        }
        .cart-layer>p:last-child>a {
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -20px;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #f00;
            color: #fff;
            padding: 0;
            border-radius: 3px;
        }
        .display {
            display: block;
        }
        .mouseenter {
            background-color: #fff;
            color: #f00;
        }
        .transition {
            transition: all 0.5s;
        }
        .height {
            height: 300px;
            overflow: scroll;
        }
        .padding {
            width: 400px;
            padding: 0;
        }
        /* .bg {
            background: no-repeat 10px 10px;
        } */
    </style>
</head>
<body>
    <div class="cart">
        <div class="cart-title">购物车<span>|</span><span>0</span><i>&#xe658</i></div>
        <div class="cart-shadow"></div>
        <div class="cart-layer"><div></div></div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/dropdown.js"></script>
    <script>
        var $cart = $('.cart');
        $cart.dropdown();
    </script>
</body>
</html>
以下是 dropdownjaon文件
[
  {
    "url":"###",
    "name":"adidas 阿迪达斯 训练 男子",
    "value":"￥335 x 1",
    "img":"../img/cart/1.png"
  },
  {
    "url":"###",
    "name":"玉兰油多效修护三部曲套装",
    "value":"￥199 x 2",
    "img":"../img/cart/2.png"
  },
  {
    "url":"###",
    "name":"Apple iPhone 7 (A1660)",
    "value":"￥6188 x 1",
    "img":"../img/cart/3.png"
  },
  {
    "url":"###",
    "name":"飞利浦面条机 HR2356/31",
    "value":"￥659 x 4",
    "img":"../img/cart/4.png"
  },
  {
    "url":"###",
    "name":"罗技G29 力反馈游戏方向",
    "value":"￥2999 x 1",
    "img":"../img/cart/5.png"
  }
]
 
以下是dropdown.js文件
(function ($) {
    function dropdown () {
        var $cartTitle = $('.cart-title');
        var $i = $cartTitle.find('i');
        var $span = $cartTitle.find('span:last-of-type');
        var $cartShadow = $('.cart-shadow');
        var $cartLayer = $('.cart-layer');
        var $a = $cartLayer.find('a');
         
        $cartTitle.hover(function(){
            var $this = $(this);
            var html = '';
            $this.addClass('mouseenter');
            $span.html(18);
            $i.addClass('transition').html('&#xe61d');
            $cartShadow.addClass('display');
            $cartLayer.addClass('display');
            if (!$this.data('loaded')) { 
                $.getJSON('dropdown.json',function(data){
                    setTimeout(function(){
                        html += '<p><span>最新加入的商品</span></p><p>';
                        for (var i = 0;i < data.length;i++) {
                            html += '<a href="'+data[i].url+'" style="background:url('+data[i].img+') no-repeat 10px 18px;">'+data[i].name+'<i>x</i><br><span>'+data[i].value+'</span></a>';
                             
                        }
                        html += '</p><p>共 0 件商品&nbsp;&nbsp;&nbsp;共计￥0.00<a href="#">去购物车</a></p>';
                        $cartLayer.html(html).addClass('padding');
                        $cartLayer.find('p:nth-child(2)').addClass('height');
                    },1000);
                });
                $this.data('loaded',true);
            }
        },function(){
            $(this).removeClass('mouseenter');
            $span.html(0);
            $i.html('&#xe658');
            $cartShadow.removeClass('display');
            $cartLayer.removeClass('display');
        });
    }
    $.fn.extend({
        dropdown: function () {
            return dropdown();
        }
    });
})(jQuery);

盈西 2020-06-06

源自：实战：搜索功能组件化 3-5 自由编程

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2020-06-06 17:18:39

同学你好，老师这边测试同学的代码是没有问题，可以正常加载json文件的。

同学那边获取不到json文件，建议参考如下建议进行调整：

将项目放在wamp或者phpstudy的www目录下，启动服务器，在浏览器中通过localhost:8080访问页面，解决可能由于跨域导致无法访问json文件的问题。
引入json文件的地址可能不对，因为dropdown.js文件是在html中引入的，所以在js中访问json文件，需要以html文件为准查找json文件所在路径。示例：
当dropdown.js和dropdown.json在同一个js文件夹时，引入json文件的路径如下所示
同学可以检查调整下，如果不确定具体怎么调整路径，可以将你的项目目录截图粘贴过来，老师帮助同学测试确定路径的写法。