我正在使用Ajax从我的网页加载数据。这是我的完整代码:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MyAPP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<span>
<base href="/aeiserver/public/"><!-- [if lte IE 6]></base><![endif]-->
<link rel="stylesheet" rel="stylesheet" media="all" href="css/bootstrap.min.css">
<link rel="stylesheet" rel="stylesheet" media="all" href="DataTables/datatables.min.css">
<link rel="stylesheet" rel="stylesheet" media="all" href="DataTables/Buttons-1.1.0/css/buttons.dataTables.min.css">
<script type="text/javascript" charset="UTF-8" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/bootstrap.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/moment-with-locales.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="DataTables/datatables.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="DataTables/Buttons-1.1.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="DataTables/Buttons-1.1.0/js/buttons.flash.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="DataTables/JSZip-2.5.0/jszip.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="DataTables/pdfmake-0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="DataTables/pdfmake-0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" charset="UTF-8" src="DataTables/Buttons-1.1.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="DataTables/Buttons-1.1.0/js/buttons.print.min.js"></script>
</span>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 text-right">
<h4><strong>MYAPP</strong></h4>
</div>
</div>
</div>
<div>
<h3><strong>Data:</strong></h3>
</div>
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Select info type:</h3>
</div>
<div class="panel-body">
<div class="list-group">
<button type="button" class="list-group-item" onClick="loadData(1)">ITEM1</button>
<button type="button" class="list-group-item" onClick="loadData(2)">ITEM2</button>
<button type="button" class="list-group-item" onClick="loadData(3)">ITEM3</button>
<button type="button" class="list-group-item" onClick="loadData(4)">ITEM4</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function loadData(option) {
getUrl = "myApp/actionurl/" + option;
$.ajax({
type: "GET",
cache: false,
datatype: "json",
url: getUrl,
contentType: "application/json, charset=utf-8",
success: processData,
error: function (error) {
alert("Error getting server data. Please retry.");
}
});
}
function processData(data, status) {
if (status != "success")
alert("Error loading MyApp data. Please retry.");
}
$(document).ready(function() {
} );
</script>
<footer>
<div class="row">
<br />
<div class="col-md-7 text-right">
(C) MyApp - <a href="http:\\www.whatever.com">www.whatever.com</a>
</div>
</div>
</footer>
</body>
</html>
永远不会调用我的方法"myApp/actionurl"
,而只调查当前页面"MyApp/index"
(查看网络部分的F12)。认为url
没有被解释。
我不知道这里发生了什么,并且似乎是一个基本的错误。需要帮助...
编辑:
我用HTML打印了完整的代码。 Javascript包含在代码中间,因为我使用的是MVC方法,其中页脚由MVC框架自动插入。
修复我确实使用<base></base>
标签,但据我所研究,它不会影响AJAX网址调用。