Ajax自动补全（Typeahead）无法调用PHP问题求助

Hey there, let's dig into why your index.html isn't calling search.php correctly. First, let's fill in the gaps in your truncated code (I’m guessing you cut off the Bootstrap JS and your custom AJAX script) so we have a full starting point:

<html>
<head>
    <title>Ajax Search Box using PHP and MySQL</title>
    <!-- Switch to HTTPS for jQuery to avoid mixed content issues -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    
    <!-- Custom AJAX script to handle search (this was likely missing/truncated) -->
    <script>
        $(document).ready(function(){
            // Listen for input in the search box
            $('#search-input').keyup(function(){
                var searchQuery = $(this).val();
                
                // Send AJAX request to search.php
                $.ajax({
                    url: 'search.php', // Make sure this path is correct!
                    method: 'POST',
                    data: { query: searchQuery },
                    success: function(response){
                        // Update results div with PHP's output
                        $('#search-results').html(response);
                    },
                    error: function(xhr, status, error){
                        // Debug info to see what's wrong
                        console.log('AJAX Error Status: ' + status);
                        console.log('Error Message: ' + error);
                        console.log('PHP Response: ' + xhr.responseText);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <h2>Ajax Search</h2>
        <input type="text" id="search-input" class="form-control" placeholder="Type to search...">
        <div id="search-results" class="mt-2"></div>
    </div>
</body>
</html>

Now let's go through the most likely reasons your AJAX call isn't hitting search.php:

• Your custom AJAX script was incomplete or missing
  The biggest red flag is your truncated <script src="h... tag. If you didn’t include the jQuery code that triggers the AJAX request when the user types, nothing will ever call search.php. Make sure you have a script block like the one above that listens for user input (keyup, submit, etc.) and sends the request.

• Incorrect file path to search.php
  Double-check that search.php lives in the exact same folder as index.html. If it’s in a subfolder (like ./backend/search.php), update the url in your AJAX call to match. If you use an absolute path, ensure it points to the right location on your server (e.g., /your-project-name/search.php).

• You’re not running a PHP-enabled web server
  PHP files won’t execute if you open index.html directly in your browser (using the file:/// protocol). You need to run a local server like XAMPP, WAMP, or MAMP, then access your files via http://localhost/your-project/index.html.

• CORS is blocking the request
  If index.html and search.php are hosted on different domains (or even different ports), browsers will block the request due to CORS rules. For development, you can add this header to the top of search.php to allow all origins (restrict this in production!):

  header("Access-Control-Allow-Origin: *");
  

• search.php has errors that break execution
  Even if the request is sent, PHP errors might stop search.php from returning a response. Add error reporting to the top of search.php to see what’s wrong:

  error_reporting(E_ALL);
  ini_set('display_errors', 1);
  

  Then check your browser’s Network tab (F12 > Network) to view the response from search.php—it’ll show any error messages.

• jQuery isn’t loading properly
  Your original jQuery URL uses HTTP, which can cause mixed content errors if your site is on HTTPS. Switch to the HTTPS version (like in the code above). Also, check your browser’s console for $ is not defined—that means jQuery failed to load.

• Mismatched request method
  If search.php uses $_GET['query'] but your AJAX call uses method: 'POST' (or vice versa), it won’t process the data. Make sure the request method in your AJAX matches how you’re retrieving data in PHP.

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