我正在尝试从我的表单中获取邮政编码，然后将其提交给javascript / jquery，然后使用该邮政编码从数据库中提取数据。我从w3schools复制粘贴的代码，并更改了一些名称，也提到了一些SO代码，从提交按钮单击ID中获取表单元素。
问题，来自search.php页面的返回内容未显示在具有eventsReturned ID的标记中。 此外，我不确定searchEvents（）方法是否正在接收zip？
到目前为止，这是我所拥有的...... 赞赏所有帮助像往常一样：
index.php页面中的Javascript -
<script>
$(document).ready(function() {
$('#searchEventsBtn').click(function() {
searchEvents($('#zip').val());
});
});
$(function searchEvents(zip) {
if (zip == null) {
document.getElementById("eventsReturned").innerHTML = "No events found in that zip code..";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("eventsReturned").innerHTML = this.responseText;
}
};
xmlhttp.open("POST","search.php",true);
xmlhttp.send();
}
});
</script>
index.php page -
<form name="searchEvents" method="post">
<input type="text" class="form-control" placeholder="Enter a zipcode" name="zip" id='zip'>
<a class="btn btn-default" style='border:1px solid #EC811C;' role="button" data-toggle="collapse" href="#advancedSearch" aria-expanded="false" aria-controls="collapseExample">
Advanced Options
</a>
</div>
<div class="col-md-4"></div>
</div>
<div class="collapse" id="advancedSearch">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<select class="form-control" name="category">
<option>All Categories</option>
<option>Bar/Nightclub</option>
<option>Local Public Event</option>
<option>Private Event/Invite Only</option>
<option>Restaurant/Dining</option>
<option>Sporting/Outdoor Activity</option>
</select>
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group date" id="startDate">
<input type="text" class="form-control" name="startDate" placeholder="Start End"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group date" id="endDate">
<input type="text" class="form-control" name="endDate" placeholder="End Date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
<script>
$(function () {
$('#startDate').datetimepicker({
format: 'YYYY-MM-DD'
});
$('#endDate').datetimepicker({
format: 'YYYY-MM-DD'
});
});
</script>
<br>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<button type="submit" id='searchEventsBtn' name="submit" class="btn btn-primary btn-lg btn-block">Search</button>
</div>
<div class="col-md-4"></div>
</div>
</form>
javascript / jquery调用的search.php页面 -
<?php
if($_SERVER["REQUEST_METHOD"] == "POST"){
if ($_POST["zip"] == ""){
echo "<script>
alert('Zip code must be entered.');
</script>";
}
else if ($_POST["zip"] < 10000 || $_POST["zip"] > 99999){
echo "<script>
alert('Zip code must be a valid number.');
</script>";
}
else {
$zip = $_POST["zip"]; //Outside for tab implementation later.
$category = $_POST["category"];
$startDate = $_POST["startDate"];
$endDate = $_POST["endDate"];
}
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
}
//EVENTS IN ZIP CODE #####
$sql = "SELECT id, name, DATE_FORMAT(date, '%W, %b %e %Y %l:%i %p') date, date orderByDate, shortDesc, summary, street, city, state, zip, private
FROM events
WHERE zip = ".$zip."
AND approved = 1
AND date > sysdate()
AND NOT EXISTS (SELECT 1 FROM signup WHERE signup.eid = events.id and signup.customer= ".$userId.")";
//Add in cateogry filtering to sql query
if ($category == "All Categories"){
//do nothing, show all categories
}
else if ($category == "Bar/Nightclub"){
$sql = $sql." AND category = 'Bar/Nightclub'";
}
else if ($category == "Local Public Event"){
$sql = $sql." AND category = 'Local Public Event'";
}
else if ($category == "Private Event/Invite Only"){
$sql = $sql." AND category = 'Private Event/Invite Only'";
}
else if ($category == "Restaurant/Dining"){
$sql = $sql." AND category = 'Restaurant/Dining'";
}
else if ($category == "Sporting/Outdoor Activity"){
$sql = $sql." AND category = 'Sporting/Outdoor Activity'";
}
//Add Date filtering
//If start and end dates are not null, then you have a date range to search for
if ((!$startDate == null) && (!$endDate == null)){
$sql = $sql." AND date BETWEEN '".$startDate." 00:00:00' AND '".$endDate." 23:59:59'";
}
//start date is set without an end date
else if ((!$startDate == null) && ($endDate == null)){
$sql = $sql." AND date > '".$startDate." 00:00:00'";
}
//start date is null but have and end date
else if (($startDate == null) && ($endDate != null)){
$sql = $sql." AND date < '".$endDate." 23:59:59'";
}
//start and end dates are null
else if (($startDate == null) && ($endDate == null)){
//dont add a date filter, do nothing
}
//Add the end part of the sql
$sql = $sql." ORDER BY orderByDate asc";
//Run the query
$result = mysqli_query($db,$sql);
//if there are records returned..
if ($result->num_rows > 0) {
echo "<h1 class='text-center'>Events in ".$zip."</h1><hr>";
//count the number of panels put into the results, this is based on col-md-4 for each panel (3 panels, 4 col width each)
$counter = 0;
while($row = $result->fetch_assoc()) {
if ($counter == 0){
echo "<div class='row'>";
}
echo "
<div class='col-md-4'>
<div class='panel panel-default'>
<div class='panel-body'>
<div class='media'>
<div class='media-left media-top'>
<a href='#'>
<img class='media-object' src='...' alt='...'>
</a>
</div>
<div class='media-body'>
<h4 class='media-heading'><b><a href='eventInfo.php?eventId=".$row["id"]."'>".$row["name"]."</a></b></h4>";
if ($row["private"] == 1){
echo "Private Address";
} else {
echo $row["street"].", ".$row["city"].", ".$row["state"]." ".$row["zip"];
}
echo "
</div>
</div>
<br>
<p class='text-left'><b>Date and Time: </b>".$row["date"]."</p>
<p class='text-left'><b>Description: </b>".$row["shortDesc"]."</p>
<form method='post' action='u_signup.php' name='signup'>
<div class='text-center'>
<button class='btn btn-primary' type='submit' name='submit' value='".$row["id"]."'>Signup For Event</button>
</div>
</form>
</div>
</div>
</div>
";
if ($counter == 2){
//reset row counter/setter
$counter = 0;
echo "</div>";
} else {
$counter++;
}
}
}
else {
if (isset($zip)){
echo "<h1 class='text-center'>Events in ".$zip."</h1><hr>";
echo "<p class='text-center'>No events for that search critera. Consider <a href='create.php'>creating an event</a> in your area!</p>";
}
}
?>
答案 0 :(得分：1)
好吧，你似乎对这种事情不熟悉，所以我将尝试解释一些事情。首先，我看到你有jquery但是尝试使用纯javascript做事，因为你可能已经复制了它。
Jquery可以让事情变得更容易，并且可以跨浏览器使用，这就是我们使用它的原因。因此，如果您想将数据发送到服务器而不是使用Jquery，请执行以下操作：
$.post('search.php', {'my_zip_code': zip}, function(data, result, xhr){
$("#eventsReturned").html(data); // notice how I use jquery instead of getElementById
});
好的，现在我们已经解决了这个问题。似乎主要问题是您无法正确调试代码。它真的很简单，所以这就是你如何做到的。
如果您使用Google Chrome进行测试，则会在开发人员工具（F12）中注意到有一个控制台选项卡。如果你想在那里展示一些东西，你可以使用：
console.log('anything');
所以，如果你想让我们看看从服务器返回的内容（search.php），你可以在我上面给你的代码中使用它：
console.log(data); // data is what was returned from the jquery ajax post
这将在控制台中显示变量，您可以查看它并查看返回的内容。
现在，如果您想查看服务器是否首先接收到数据，那么它也很容易实现。再次在您的Google Chrome开发人员工具中，查找名为“网络”的标签。现在，在您的网络选项卡中，如果您向服务器发送了ajax请求，它将在那里列出，通常带有您请求的页面名称，例如search.php。
当你点击这个请求时，它应该首先显示发送的是什么，但是应该有一个带响应的标签...现在如果你什么也看不到，你可以去你的php文件并输入在下面：
var_dump($_POST);
这将显示发布到文件的所有内容，包括邮政编码（如果曾发送过）。该输出应该在响应选项卡中，如上所述。
了解如何调试代码并发现问题是最好的方法，而不仅仅是某些人在这里提供的解决方案。
古德勒克