0
我使用Framework7创建我的应用程序。我正在请求一些json数据并使用jQuery将其显示在我的页面上。问题是，当我使用index.html它的工作的代码，但是当我在应用它不工作的任何其他页面使用的代码，我看到的只是一个导航栏和空白页。我在index.html和restaurant.html中使用相同的jQuery脚本。如何使用Ajax在framework7
带电作业演示代码here
我的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
\t <meta name="theme-color" content="#2196f3">
<title>Tour Srilanka</title>
<script type="text/javascript" src="cordova.js"></script>
\t <script type="text/javascript" src="ad.js"></script>
<!-- Path to Framework7 Library CSS-->
<link rel="stylesheet" href="css/framework7.material.min.css">
<link rel="stylesheet" href="css/framework7.material.colors.min.css">
\t <link rel="stylesheet" href="css/framework7-icons.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css">
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url: 'http://sonsofthunderstudio.in/jj/jaffnahotels.json',
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
type: 'get',
crossDomain : true,
cache: false,
success: function(data) {
$(data.jaffna).each(function(index, value) {
console.log(value);
$(".siteloader").append("<ul>"+"<li>"+"<a class='item-link item-content'>"+"<div class='item-media'>"+"<img src='" + value.image + "' width='100px' height='70px'/>"+"</div>"+
"<div class='item-inner'>"+"<div class='item-title-row'>"+"<div class='item-title'>"+value.name+"</div>"+"</div>"+
"<div class='item-text'>"+value.review+"</div>"+"</div>"+"</a>"+"</li>"+"</ul>");
});
}
});
</script>
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-cover">
<div class="view navbar-fixed">
<div class="pages">
<div data-page="panel-left" class="page">
\t \t \t <div class="card demo-card-header-pic page-content">
<div style="background-image:url('img/header.jpg');" valign="bottom" class="card-header color-white no-border header-font">Tour Srilanka</div>
<div class="list-block">
<ul>
<li><a href="restaurant.html" class="item-link close-panel">
<div class="item-content">
<div class="item-media"><i class="icon"><img src="img/rest.png"></i></div>
<div class="item-inner">
<div class="item-title">restaurants</div>
</div>
</div></a>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
\t
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="index" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Tour Srilanka</div>
<div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block-title">Framework7 Kitchen Sink</div>
<div class="list-block">
<ul>
<li><a href="restaurant.html" class="item-link">
<div class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Restaurant</div>
</div>
</div></a></li>
</ul>
</div>
<div class="siteloader"></div>
</div>
</div>
</div>
</div>
</div>
</div> \t
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="js/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>我restaurant.html
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url: 'http://sonsofthunderstudio.in/jj/jaffnahotels.json',
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
type: 'get',
crossDomain : true,
cache: false,
success: function(data) {
$(data.jaffna).each(function(index, value) {
console.log(value);
$(".siteloader").append("<ul>"+"<li>"+"<a class='item-link item-content'>"+"<div class='item-media'>"+"<img src='" + value.image + "' width='100px' height='70px'/>"+"</div>"+
"<div class='item-inner'>"+"<div class='item-title-row'>"+"<div class='item-title'>"+value.name+"</div>"+"</div>"+
"<div class='item-text'>"+value.review+"</div>"+"</div>"+"</a>"+"</li>"+"</ul>");
});
}
});
</script>
<div data-page="restaurant" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
<div class="center">Restaurant</div>
<div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
</div>
</div>
<div class="page-content">
<div class="siteloader"></div>
</div>
</div>