点击查询按钮无响应？日期范围查询功能故障排查求助

Let's walk through the issues causing your search button to not respond, and fix them step by step:

1. HTML Syntax Error in Select Element #

Your <select> tag has invalid syntax—the closing part is reversed, which breaks the DOM structure and can prevent JavaScript from working correctly:
Broken Code:

<select name="station" id="station"</select>>

Fixed Code:

<select name="station" id="station">

2. Mismatched Input IDs in JavaScript #

Your date input fields have IDs start_date and end_date, but your JS code tries to reference from_date and to_date—this means it can't read the user's date input, leading to either a misleading alert or no action at all:
Broken Code:

var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
// Also the datepicker init targets wrong IDs
$(function(){ $("#from_date").datepicker(); $("#to_date").datepicker(); });

Fixed Code:

var from_date = $('#start_date').val();
var to_date = $('#end_date').val();
// If using HTML5 date inputs, you can remove the datepicker init entirely to avoid conflicts
// $(function(){ $("#start_date").datepicker(); $("#end_date").datepicker(); });

3. Mismatched Table ID in AJAX Callback #

Your AJAX success function tries to update #order_table, but your actual table has the ID order_data—even if the request succeeds, you won't see any changes on the page:
Broken Code:

success:function(data) {
    $('#order_table').html(data);
}

Fixed Code:

success:function(data) {
    // Target the tbody to preserve your table header
    $('#order_data tbody').html(data);
}

4. Incomplete Output in search.php #

Your current search.php only runs the query but doesn't output any HTML for the AJAX response. Without this, the page gets empty data and won't update. We also need to handle date formatting correctly for Oracle:
Fixed search.php:

<?php
if(isset($_POST["from_date"], $_POST["to_date"])) {
    $conn = oci_connect('IPA_admin','*******','localhost/IPADB');
    if (!$conn) {
        $e = oci_error();
        trigger_error(htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR);
    }
    // HTML5 date inputs return YYYY-MM-DD, convert to Oracle DATE type
    $query = oci_parse($conn,'SELECT * FROM STOPPOINT_NAMES WHERE DATUM BETWEEN TO_DATE(:from_date, \'YYYY-MM-DD\') AND TO_DATE(:to_date, \'YYYY-MM-DD\')');
    oci_bind_by_name($query, ':from_date', $_POST['from_date']);
    oci_bind_by_name($query, ':to_date', $_POST['to_date']);
    oci_execute($query);
    
    // Output table rows for the AJAX response
    while(($row = oci_fetch_array($query, OCI_BOTH)) != false) {
        echo '<tr>';
        echo '<td>'.$row["STOPPOINTID"].'</td>';
        echo '<td>'.$row["STOPPOINT_NAME"].'</td>';
        echo '<td>'.$row["DATUM"].'</td>';
        echo '<td>'.$row["DISTANCE"].'</td>';
        echo '</tr>';
    }
    oci_free_statement($query);
    oci_close($conn);
}
?>

5. Improved JavaScript with Error Handling #

Add error handling to your AJAX call to debug issues easily, and clean up unused code:
Final JavaScript Section:

$(document).ready(function(){
    $('#filter').click(function(){
        var from_date = $('#start_date').val();
        var to_date = $('#end_date').val();
        if(from_date != '' && to_date != '') {
            $.ajax({
                url:"search.php",
                method:"POST",
                data:{from_date:from_date, to_date:to_date},
                success:function(data) {
                    $('#order_data tbody').html(data);
                },
                error:function(xhr, status, error) {
                    console.log(xhr.responseText); // Log errors for debugging
                    alert("Oops, something went wrong while fetching data.");
                }
            });
        } else {
            alert("Please select both start and end dates.");
        }
    });
});

Bonus Tips #

• Extract your Oracle connection logic into a separate file (e.g., db_connect.php) to avoid repeating code and make maintenance easier.
• Always add error handling for database operations to catch issues like invalid credentials or query syntax errors.

内容的提问来源于stack exchange，提问作者Barbara