正如标题所示，我试图显示查询结果并且它正常工作，但它会在搜索按钮下方自动显示结果，等待按下按钮然后重新加载页面并显示结果。我确信这是代码的问题，但我无法找到。我知道这是一个愚蠢的问题，但所有的帮助都表示赞赏。
这是我的代码：
<?php
mysql_connect('localhost', 'root', 'Passw0rd') or die(mysql_error());
mysql_select_db("cvtool") or die(mysql_error());
include("include/session.php");
$username = $_SESSION['username'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!--The viewport tag is used in order to scale the page properly inside any screen size -->
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>CV Tool</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/main.css"/>
<!--Import JQuery from stored file -->
<script src="js/jquery-1.11.1.min.js"></script>
<!--Import JQuery from Google's Content Delivery Network -->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/backToTop.js"></script>
</head>
<body>
<!--Big wrapper contains the whole site (header,navigation menu,....,footer-->
<div id="big_wrapper">
<header id="top_header">
<a href="main.php"><img src="images/cvlogo.png"> </a>
</header>
<br>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="main.php">Home</a></li>
<?php
/**
* User has already logged in, so display relavent links, including
* a link to the admin center if the user is an administrator.
*/
if($session->logged_in){
echo "<li><a href=\"search.php\">Search</a></li>"
."<li><a href=\"myCVs.php\">My CV(s)</a></li>"
."<li><a href=\"userinfo.php?user=$session->username\">My Account</a></li>"
;
echo "<li><a href=\"process.php\">Logout</a></li>";
}
else
?>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
<section id="main_section">
<?php
/**
* User not logged in, display the login form.
* If user has already tried to login, but errors were
* found, display the total number of errors.
* If errors occurred, they will be displayed.
*/
if($form->num_errors > 0){
echo "<font size=\"2\" color=\"#ff0000\">".$form->num_errors." error(s) found</font>";
}
?>
<form action="search.php" method="GET" >
<h1>Search for an CV</h1>
<h3>Department</h3>
<br/>
<select id="dropDown">
<option value="">Choose a department</option>
<option value="Comp">Computer Science</option>
<option value="Bus">Business Studies</option>
<option value="Psy" >Psychology</option>
<option value="Eng">English Studies</option>
</select>
<br/>
<h3>Skills</h3>
<br/>
<div id="Comp"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
Java
<input type="checkbox" name="whatever" />
AI
<input type="checkbox" name="whatever" />
Web Development
</div>
<div id="Bus"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
Business 1
<input type="checkbox" name="whatever" />
Business 2
<input type="checkbox" name="whatever" />
Business 3
</div>
<div id="Psy"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
Psychology 1
<input type="checkbox" name="whatever" />
Psychology 2
<input type="checkbox" name="whatever" />
Psychology 3
</div>
<div id="Eng"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
English Studies 1
<input type="checkbox" name="whatever" />
English Studies 2
<input type="checkbox" name="whatever" />
English Studies 3
</div>
<script>
$(document).ready();
$('.drop-down-show-hide').hide();
$('#dropDown').change(function () {
$(this).find("option").each(function () {
$('#' + this.value).hide();
});
$('#' + this.value).show();
});
</script>
</form>
<form action="search_result.php">
<input type="submit" name="search" id="search" value="Search" />
<div id="search"></div>
<script>
$(document).ready(function(){
$("#dropDown").change(function(){
var data = $(this).val();
$.ajax({
type:'POST',
data:'search_value='+data,
url:'search_result.php',
success:function(data){
$("#search").html(data);
}
});
});
});
</script>
</form>
</section>
<footer id="the_footer">
City CV Tool 2014
</footer>
<a href="#" class="back-to-top"></a>
</div>
</body>
</html>
答案 0 :(得分：3)
这是因为这一行
$("#dropDown").change(function(){
在表单中添加一个提交按钮，如果这是您想要的，那么运行该功能
<input type="submit" value="Submit" />
在表单标记
中添加ID<form id="searchformSubmit"
然后做
$("#searchformSubmit").on('submit',function(){
如果用户按下回车键提交而不是按钮，如果页面上只有一个表单，那么这也应该有效
答案 1 :(得分：0)
页面重新加载的原因是，HTML表单中的任何<button>或或<input type='submit'> 将重新加载页面，除非您有onClick='return false;'他们。我想你需要补充一下：
onClick="startsearch();return false;"
在提交按钮上。您还必须使用它发送表单数据。为此，请使用以下命令创建变量：
var form_data = $('#form').serialize();
并发送：
$.post('search_result.php', {form: form_data}, function(data) {$("#search").html(data);})
答案 2 :(得分：0)
当您的下拉列表更改（点击，用户输入，...）时，会调用您的ajax调用（结果搜索），但您应该将操作绑定到表单上
$(document).ready(function(){
$("#search").click(function(){
var data = $("#dropDown").val();
$.ajax({
type:'POST',
data:'search_value='+data,
url:'search_result.php',
success:function(data){
$("#search").html(data);
}
});
});
});
此外，没有必要在表单中指定操作，但是它会触发表单操作并将您重定向到页面search_result.php，我建议您更新它并设置action="#" < / p>