Js跨域
来自CloudWiki
<!DOCTYPE html>
<html>
<head>
<title>jquery跨域</title>
<meta charset="utf-8">
<style>
body,
ul,
h1,
h2,
h3 {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
header {
width: 100%;
height: 100px;
background: rgba(0, 255, 0, 0.5);
}
nav {
width: 100%;
height: 45px;
line-height: 45px;
background: #000;
}
nav ul {
width: 900px;
margin: 0 auto;
}
nav ul li {
width: 150px;
border-right: 1px solid #ccc;
float: left;
text-align: center;
font-size: 18px;
box-sizing: border-box;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color: #fff;
}
section {
width: 900px;
margin: 20px auto;
}
section ul li {
width: 100%;
height: 140px;
margin-bottom: 20px;
border: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
section ul li div {
height: 100px;
}
section ul li div:first-child {
flex: 1;
padding: 0 20px;
}
section ul li div:last-child {
flex: 8;
padding: 0 30px;
}
section ul li div img {
width: 100%;
}
footer {
width: 100%;
height: 150px;
background: #000;
}
</style>
</head>
<body>
<script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
var html = '- ';
for(var i = 0; i < data.length; i++)
{
html += '
- ' + data[i] + ' ';
}html += '';
$('section').html(html);
}); </script>
<header id="header" class="">
</header> <nav>
- <a href="" title="">首页</a>
- <a href="" title="">关于我们</a>
- <a href="" title="">新闻中心</a>
- <a href="" title="">联系我们</a>
- <a href="" title="">加盟中心</a>
</nav> <section>
</section> <footer>
</footer>
</body>
</html>
