似乎我的ajax工作但没有发布任何内容

Question

I am trying to post the value of my selector to a php file but it isnt working. My success function works and when i go to "your_php_script.php" the page works and the php runs as expected. Why wont the php page show up on the page with the ajax? I edited my post to add the database connection function from database_connection.php

// html & jquery
 <select name="rooftop" id="rooftop" class="selectMenu">
            <option value="">Select an option</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>


    <button id="barButton">click</button>

    <div id="showBars">

    </div>


    <script type="text/javascript">

        $(document).ready(function(){

                          $("#barButton").click(function() {
                            var selected = $("#rooftop").val();
                            $.ajax({
                                   type: "POST",
                                   url: "your_php_script.php",
                                   data: {selected: selected},
                                   success: function(){
                                   alert("works");
                                   }

                            });
                          });

// code on your_php_script.php
<?php

require_once("database_connection.php");
$db = db_connect();

 echo "<script type='text/javascript'> alert('works1'); </script>";
    $selected = $_POST["selected"];
    if(isset($selected)){
        echo "<script type='text/javascript'> alert('works2'); </script>";
        $sql = "SELECT bar_name, area, hourStart, hourEnd FROM barInfo WHERE rooftop = 1";
        $result = mysqli_query($connection, $sql);
        if (mysqli_num_rows($result) > 0) {
            echo "<table id='list'><tr><th><h3>Name</h3></th><th><h3> Area</h3></th><th><h3>Happy Hour Times</h3></th></tr>";
            while($row = mysqli_fetch_assoc($result)) {
                echo "<tr> <th> <h6> " . $row["bar_name"] . "</h6> </th> <th> <h6>" . $row["area"] . "</h6> </th> <th> <h6>" . $row["hourStart"] . "-" . $row["hourEnd"] . "</h6> </th> </tr>";
            }
            echo "</table";
        }

    }
db_disconnect($db);

?>


// database connection
function db_connect() {
        global $connection, $servername, $username, $password, $database;
        $connection = new mysqli($servername, $username, $password, $database) or die("Unable to Connect");
        return $connection;
    }

Answer 1

As you mentioned that the number of rows in result is not more than 0, That does means either $connection is not properly defined OR there is no such entry in database where barInfo = 1 so its returning back nothing.

So firstly you should check your database_connection.php file if the connection to the DB is done properly or not, because it could be the case that this file (your_php_script.php) is not getting $connection from database_connection.php file.

Also, as i mentioned earlier, dataType is important (not mandatory though). Even more important is to append the incoming data in the apt. element, for which your success function should look like :

$.ajax({
    type: "POST",
    dataType: "html"
    url: "your_php_script.php",
    data: {
        selected: selected
    },
    success: function(result) {
        alert("works");
        jQuery("#showBars").html(result); 
    },
    error: function(error) {
       alert(error);
    }
});

Things to remember while using ajax:

1) Make sure the dataType attribute is appropriately defined. If none is specified, jQuery will try to infer it based on the MIME type of the response.

2) Success function should be defined properly with the proper usage of the incoming data, on how to use it in your HTML view.

3) Make habit of using error function as it will help you get your errors when it not enters Success function and have any error(s).