老师帮忙看一下为啥我请求json文件时会报这个错

老师帮忙看一下为啥我请求json文件时会报这个错

http://img1.sycdn.imooc.com//climg/5f19362f096777d506050144.jpg

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>幕淘网</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛幕淘</a></li>
</ul>
<ul class="fr">
<li class="fl menu dropdown" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link">我的幕淘<i class="transition dropdown-arrow icon icon-xialajiantou"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="fl menu dropdown" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link">收藏夹<i class="transition dropdown-arrow icon icon-xialajiantou"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class=" fl menu dropdown" data-active="menu" data-load="js/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link">卖家中心<i class="transition dropdown-arrow icon icon-xialajiantou"></i></a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>
</ul>
</li>
<li class="nav-site-service fl menu dropdown" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link">联系客服<i class="transition dropdown-arrow icon icon-xialajiantou"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="header">
<div class="container">
<h1 class="fl"><a href="index.html" class="header-logo text-hidden">慕课网</a></h1>
<div class="search fl" id="header-search">
<form action="http://s.taobao.com/search" class="search-form">
<input type="text" class="search-inputbox fl" name="q" placeholder="快来抢啊兄弟萌" autocomplete="off"/>
<input type="submit" value="搜索" class="search-btn fl" />
</form>
<ul class="search-layer">
<!--  <li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li> -->
</ul>
</div>
<div class="cart fr">
<div class="cart-btn active">
<i class="icon icon-gouwuche"></i>
<span>购物车</span>
<span>|</span>
<span>0</span>
<i class="icon icon-xialajiantou"></i>
</div>
<div class="cart-layer">
<div class="cart-layer-nothing">
<i class="fa fa-question-circle-o" ></i>
<p>
购物车里还没有商品赶紧去选购吧
</p>
</div>
<div class="cart-layer-haveGoods">
<div class="cart-layer-haveGoods-title">
最新加入的商品
</div>
<div class="cart-layer-haveGoods-main">
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
<div class="goods-item">
<div class="goods-item-pic">
<img src="img/cart/1.png">
</div>
<div class="goods-item-intr">
<p>adidas 阿迪达斯 训练 男子</p>
<p>￥<span class="price">335</span>×<span class="amount">1</span></p>
</div>
<div class="goods-item-del">
X
</div>
</div>
</div>
<div class="cart-layer-haveGoods-totalPrice">
<span>共<i>0</i>件商品</span>
<span>共计<i>￥0.00</i></span>
<button>去购物车</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/showhide.js" type="text/javascript" charset="utf-8"></script>
<script src="js/dropdown.js" type="text/javascript" charset="utf-8"></script>
<script src="js/search(2).js" type="text/javascript" charset="utf-8"></script>
<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

index.css

/* nav-site */
.nav-site {
	width: 100%;
	background-color: #f3f5f7;
}

.nav-site .container {
	height: 44px;
	line-height: 44px;
	border-bottom: 1px solid #cdd0d4;
}

.nav-site-login {
	color: #F01414;
	margin-left: 15px;
}

.nav-site-mobile,
.nav-site-signup {
	margin-left: 10px;
}

.nav-site-category {
	margin: 0 10px;
}

.nav-site-service {
	margin-right: 15px;
}

/* header */
.header {
	width: 100%;
	height: 124px;
	background-color: #f3f5f7;
}

.header-logo,
.header .search,
.header .cart {
	margin-top: 36px;
}

.header-logo {
	display: block;
	width: 136px;
	height: 48px;
	background: url(../img/header-logo.png);
	margin-left: 15px;
}

.header .search {
	margin-left: 145px;
}

/* 购物车 */
.header .cart {
	position: relative;
}

.header .cart .cart-btn {
	height: 42px;
	width: 158px;
	background-color: #F01414;
	color: white;
	line-height: 42px;
	font-size: 12px;
	vertical-align: middle;
	cursor: pointer;
}

.header .cart .cart-btn i {
	font-weight: 600;
}

.header .cart .cart-btn .icon-gouwuche {
	margin: 0 11px;
	vertical-align: middle;
}

.header .cart .cart-btn span {
	margin-right: 11px;
	vertical-align: middle;
}

.header .cart .cart-btn .icon-xialajiantou {
	vertical-align: middle;
	transform: rotate(-180deg);
}

/* 下拉层 */
.header .cart-layer {
	display: none;
	position: absolute;
	/* width: 320px; */
	/* height: 120px; */
	background-color: white;
	border: 1px solid #CDD0D4;
	box-shadow: #e9e9e9 0px 0px 6px;
	right: 0;
}

.header .cart .cart-btn.active {
	background-color: white;
	color: red;
	box-shadow: #e9e9e9 0px 0px 6px;
}

.header .cart .cart-btn.active .icon-xialajiantou::before {}

.header .cart .cart-btn.active+.cart-layer {
	display: block;
}

.header .cart .cart-layer .cart-layer-nothing {
	width: 320px;
	height: 120px;
	box-sizing: border-box;
	/* padding: 81px 39px 77px 0px; */
	padding: 39px 77px 0px 81px;
}

.header .cart .cart-layer .cart-layer-nothing i,
.header .cart .cart-layer .cart-layer-nothing p {
	display: inline-block;
}

.header .cart .cart-layer .cart-layer-nothing i {
	color: #d9dde1;
	font-size: 39px;
}

.header .cart .cart-layer .cart-layer-nothing p {
	width: 108px;
	font-size: 12px;
	line-height: 21px;
	color: #93999f;
	margin-left: 16px;
}

.header .cart .cart-layer .cart-layer-haveGoods {
	width: 320px;
	padding-left: 12px;
	padding-right: 0px;
	box-sizing: border-box;
}

.header .cart .cart-layer .cart-layer-haveGoods .cart-layer-haveGoods-title {
	height: 52px;
	line-height: 52px;
	font-size: 12px;
	margin-right: 29px;
	border-bottom: #d9dde1 1px solid;
}
.header .cart .cart-layer .cart-layer-haveGoods .cart-layer-haveGoods-main{
	height: 325px;
	overflow-y: scroll;
}
.header .cart .cart-layer .cart-layer-haveGoods .goods-item {
	height: 64px;
	border-bottom: #d9dde1 1px solid;
	position: relative;
	font-size: 0;
	margin-right: 12px;
}

.header .cart .cart-layer .cart-layer-haveGoods .goods-item>div {
	float: left;
	font-size: 12px;
	height: 64px;
}

.header .cart .cart-layer .cart-layer-haveGoods .goods-item .goods-item-pic {
	width: 48px;
	height: 64px;
	position: relative;
	margin-left: 14px;
	margin-right: 13px;
}

.header .cart .cart-layer .cart-layer-haveGoods .goods-item .goods-item-pic img {
	top: 50%;
	position: absolute;
	transform: translateY(-50%);
}
.header .cart .cart-layer .cart-layer-haveGoods .goods-item .goods-item-intr p{
	color: #4D555D;
}
.header .cart .cart-layer .cart-layer-haveGoods .goods-item .goods-item-intr p:nth-child(1){
	margin-top: 17px;
	margin-bottom: 13px;
	}
.header .cart .cart-layer .cart-layer-haveGoods .goods-item .goods-item-intr p:nth-child(2){
	font-size: 10px;
	font-weight: 600;	
}
.header .cart .cart-layer .cart-layer-haveGoods .goods-item .goods-item-del{
	position: absolute;
	right: 13px;
	top:19px;
	color: #4D555D;
	font-size: 9px;
	font-weight: 600;
}
.header .cart .cart-layer .cart-layer-haveGoods-totalPrice{
	padding-left: 5px;
	height: 68px;
	line-height: 68px;
}
.header .cart .cart-layer .cart-layer-haveGoods-totalPrice span{
	font-size: 11px;
	margin: 0 5px;
}
.header .cart .cart-layer .cart-layer-haveGoods-totalPrice i{
	font-weight: 600;
	margin: 0 4px;
}
.header .cart .cart-layer .cart-layer-haveGoods-totalPrice button{
	margin-left: 42px;
	width: 80px;
	height: 36px;
	background-color: #f01414;
	border-radius: 4px;
	border: none;
	color: white;
	cursor: pointer;
}

cart.js

var $cart = $('.cart')
var $cartBtn = $('.cart-btn')
var $cartNothing = $('.cart-layer-nothing')
var $cartHaveGoods = $('.cart-layer-haveGoods')
$cart.hover(function() {
	$cartBtn.addClass('active')
	getData()
}, function() {
	$cartBtn.removeClass('active')
})
init($('.cart-layer-haveGoods-main'))

function init(ele) {
	console.log(ele.children().length)
	if (ele.children().length === 0) {
		$cartNothing.show()
		$cartHaveGoods.hide()
	} else {
		$cartNothing.hide()
		$cartHaveGoods.show()
	}
}

function getData() {
	$.ajax({
		url:'cart.json',
		dataType: 'jsonp',
		success:function(data){
			console.log(data)
		}
	})
}

cart.json

[
  {
    "name":"adidas 阿迪达斯 训练 男子",
    "price":"￥335",
    "url":"../imgs/cart/1.png"
  },
  {
    "name":"玉兰油多效呵护三部曲套装",
    "price":"￥199",
    "url":"../imgs/cart/2.png"
  },
  {
    "name":"Apple iPhone 7（A1660）",
    "price":"￥6188",
    "url":"../imgs/cart/3.png"
  },
  {
    "name":"飞利浦面条机123456/11",
    "price":"￥659",
    "url":"../imgs/cart/4.png"
  },
  {
    "name":"罗技G29 力反馈游戏方向",
    "price":"￥2999",
    "url":"../imgs/cart/5.png"
  },
  {
    "name":"Apple iPhone 7（A1660）",
    "price":"￥6188",
    "url":"../imgs/cart/3.png"
  },
  {
    "name":"玉兰油多效呵护三部曲套装",
    "price":"￥199",
    "url":"../imgs/cart/2.png"
  }
]
前端小白白白白白白 2020-07-23
源自： 实战：搜索功能组件化   3-5 自由编程
24
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕久久 回答被采纳获得+3积分 2020-07-23 15:39:53

同学你好，老师这边测试你的代码，可以正确发送请求，如下：

http://img1.sycdn.imooc.com//climg/5f193e12096f1fa010230449.jpg

建议同学将“dataType: 'jsonp',”这句代码去掉（即不用jsonp请求），再测试一下，如下：

http://img1.sycdn.imooc.com//climg/5f193e1a0982a66704860248.jpg

由于不能复现同学的报错，所以老师给你几种方案尝试一下：

1. 按住ctrl+F5强制刷新一下页面，清一下缓存试试。

2. 打开源码，看一下源码中的请求，能否正常执行，测试一下是不是服务器的问题。

3. 更换一下jQuery.js文件，换成咱们源码中的jq文件试一下。

祝学习愉快！

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

用Ajax访问本地的json文件，报了一个这样的错误
7 0 3
老师，帮我看看报的错。
18 0 5
为啥我上传文件后会报错
8 0 5
使用学生信息库创建json文件时报错
24 1 4
老师请教下。
14 0 5

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师