我有一个“索引”页面，当按下导航栏中的任何按钮时，它会替换“mainContents”。
这样我就可以只重新加载需要的内容，并保持页眉、导航栏和页脚静态。
这在我的“search.html”页面(加载到#mainContents 中)给我带来了麻烦。
search.html 有一个表单，它(将)通过 PHP 调用一些 sql 查询。当我最初设计这个网页时，我让它跨越了多个页面；每次重新加载页眉、页脚等。所以我只是用新的“php”内容重新加载了整个页面(这将是一个填充有数据的表格)。
现在“search.html”位于“index.html”页面的#mainContents 内，当按下“go/submit”按钮时，整个页面会重新加载，我会丢失页眉和页脚。 ..
我已经这样做了一段时间了，但我不知道如何让它发挥作用。
我会包括相关的页面/脚本(虽然看起来有点多，但我希望你有可用的信息)
Index.html(主页):
<!DOCTYPE html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="noteVote">
<!-- HEADER -->
<div data-role="header" align="middle" class="header">
<img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- NAVBAR -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
<!-- /NAVBAR -->
</div>
<!-- /HEADER -->
<!--
This is the MAIN section.
This is where the contents will be replaced
-->
<div data-role="content" class="ui-content" id="mainContent">
Site-related text.
</div>
<!-- /MAIN -->
<!-- FOOTER -->
<div data-role="footer" class="footer">
This is the footer.
</div>
<!-- /FOOTER -->
</div>
<!-- /INDEX -->
<script src="./scripts/navScript.js"></script>
</body>
</html>
navScript.js 是导致导航按钮仅替换#mainContents 的脚本:
$(document).ready(function() {
// Actual script includes code for each nav-bar button.
$("#searchButton").on("click", function(e) {
e.preventDefault();
$("#mainContent").load("./pages/search.html");
});
然后是仅替换 #mainContent 的“search.html”。 (这是它变得困惑的地方，因为我已经尝试了几种方法让它按照我想要的方式工作):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main" data-role="content" id="main">
<div id="holder">
<h1>Search</h1>
<div class="left">
<form id="searchForm">
<b>Course:</b>
<select name="course">
<option value="*">All</option>
<option value="COMM2216">COMM-2216</option>
<option value="COMP2121">COMP-2121</option>
<option value="COMP2510">COMP-2510</option>
<option value="COMP2526">COMP-2526</option>
<option value="COMP2714">COMP-2714</option>
<option value="COMP2721">COMP-2721</option>
</select>
<p>
Type:
<input type="radio" name="type" value="lec">Lecture
<input type="radio" name="type" value="lab">Lab
<input type="radio" name="type" value="*" checked>Both
<p>
<input type="submit" value="Go" id="searchGoButton">
</form>
</div>
</div>
</div>
<script src="./scripts/searchGo.js">
</script>
</body>
</html>
最后“searchGo.js”是应该强制仅更改“search.html”页面的代码(在 #mainContent 中)，以便页眉、页脚等保持存在。
$(document).ready(function() {
$("#searchForm").submit(function(e)
{
e.preventDefault();
$.ajax({
type: "POST",
url: "./scripts/php_test.php",
data: "blah",
success: function(){
$("#holder").load("../pages/account.html");
}
}) ;
} );
这只是一个示例/测试，看看它是否可行；但它会重新加载整个页面。
我的意图是 searchGo.js 将加载一个将调用 sql 查询的 .php 脚本，并填充一个表并将 #mainContent div 替换为它的
再次，我为所有代码道歉，如果我的问题含糊不清......我完全被难住了，非常感谢任何帮助。我的替代方案是重新加载每个页面的导航栏和标题；如果没有人可以提供帮助，我将尽快求助。
我们非常欢迎任何关于完成此任务的替代方法的建议。
最佳答案
尝试加上onsubmit="return false;"在搜索表单标签上。问题是您没有覆盖默认的提交按钮表单行为。这就是您的表单提交刷新整个页面的原因。
像这样:
<form onsubmit="return false;">
<input id="submitButton" type="submit" />
</form>
你可以像这样调用你的搜索函数
$(document).ready(function() {
$('#submitButton').on('click', function() {
console.log('Form submitted');
console.log('Ajax call');
console.log('Insert returned data');
});
});
关于javascript - 使用 PHP 仅替换 <form> 提交按钮中的(当前)<div> 内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23552865/