用PHP的Ajax JQuery邮政编码查询MySql数据库不起作用

Question

I have an HTML form that runs a Javascript function on page load. In the Javascript function, a town name is sent via Ajax post call to Php function to get details from MySql database.

Ajax call in JavaScript function

var town = "Town name";          //depends on the previous execution in JS function
if (town != "undefined") {
    jQuery.ajax({
        type: "POST",
        url: '../model/data_access/GetCity.php',
        dataType: 'json',
        data: {town: town},
        success: function (obj) {
            document.getElementById("selectedLocation").value = obj[0]["name"];
            document.getElementById("placeDescriptionBox").value = obj[0]["description"];
        }
    });
}

GetCity.php

$town = $_POST['town'];
get_city($town);

function get_city($town)
{
    $place = array();
    $db_conn = DBConnection::get_database_connection(); 
    $stmt = $db_conn->prepare("SELECT * FROM place WHERE name=?");
    $stmt->bind_param("s", $town);
    $stmt->execute();

    if (!($result = $stmt->get_result())) {
        echo "Error" . $stmt->error;
    }

    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $place[0] = new Place();
        $place[0]->set_name($row["name"]);
        $place[0]->set_description($row["description"]);
        echo json_encode($place);
    }
}

The data from database are not displayed in the HTML form. How can I solve this? I'm new to Ajax JQuery so any help is much appreciated.

Answer 1

You are making a POST request:

 type: "POST", 

… but are trying to read the data from the query string:

 $town = $_GET['town']; 

jQuery will post data in the request body when you make a POST request, so it will appear in $_POST not $_GET .

Change type: "POST", to type: "GET", (or omit it entirely as GET is the default).

Answer 2

if you are checking whether the variable exist are not :

if (town != "undefined") {} should be if (typeof town !== "undefined") {}

Answer 3

Change $town = $_GET['town']; to $town = $_POST['town']; as you used type: "POST", in your ajax request.

Answer 4

Please pass the town name with url encoded with javascript function encodeURI and please debug the code whether your php code returns the town list or not

    var town = "Town name";          //depends on the previous      execution in JS function
 if (town != "undefined") {
jQuery.ajax({
    type: "POST",
    url: '../model/data_access/GetCity.php',
    dataType: 'json',
    data: {town: town},
    success: function (obj) {
console.log(obj);

        document.getElementById("selectedLocation").value = obj[0]["name"];
        document.getElementById("placeDescriptionBox").value = obj[0]["description"];
    }
});

}