How can I get data from MySQL via Ajax?

Question

I want to get some data via Ajax, but there must be some mistake because the result is empty

script:

<script>
function showUser(value) {
    var values = $(this).serialize();

    $.ajax({
        url: "test.php",
        data: {
            id: value
        },
        type: "POST",
        success: function(data){
            $("#result").html(data);
        }
    })

}
</script>

html:

<form>
    <select name="users" onchange="showUser(this.value)">
        <option value="">Select a person:</option>
        <option value="1">Peter Griffin</option>
        <option value="2">Lois Griffin</option>
        <option value="3">Joseph Swanson</option>
        <option value="4">Glenn Quagmire</option>
    </select>
</form>
<br>
<div id="result"></div>

test.php:

<?php
$id = @$_POST['id'];

$pdo = $db->query('SELECT * FROM people WHERE id = "' . $id . '"');

while ($row = $pdo->fetch(PDO::FETCH_ASSOC)) {
    echo  $row['id'];
}     

?>

Answer 1

HTML:-

<select id ="myselect" name="users" onchange="showUser()">
      <option value="">Select a person:</option>
      <option value="1">Peter Griffin</option>
      <option value="2">Lois Griffin</option>
      <option value="3">Joseph Swanson</option>
      <option value="4">Glenn Quagmire</option>
</select>
<br>
<div id="result"></div>

Javascript:-

<script>
    function showUser() {
        $.ajax({
            url: "test.php",
            data: {
                id: $( "#myselect option:selected" ).val();
            },
            type: "POST",
            success: function(data){
                $("#result").html(data);
            }
        });
    }
</script>

PHP:-

<?php
    if(isset($_POST['id'])){
        $id = $_POST['id'];

        // i don't know from where $db is coming so check yourself

        $pdo = $db->query('SELECT * FROM people WHERE id = "'.$id.'" LIMIT 1'); 
        while ($row = $pdo->fetch(PDO::FETCH_ASSOC)) {
            echo $row['id'];
        } 
    }else{
       echo "Please select value from select box";
    }                             
    ?>

Note:-

Meanwhile read about prepared statements and use them to prevent from SQL Injection . Thanks

Answer 2

If you dont want to use jquery, you can do something like this:-

var http = new XMLHttpRequest();
var url = "****Some URL (php etc to process the sql data)******";
var p = hex_sha512(userPass.value);
var params = "email="+userEmail.value+"&p="+p+"&adminStat=true";

http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send(params);

http.onreadystatechange = function() {
    if (http.readyState == 4) {
        //Todo
        // check addition stat and go to the destination page
        if (http.responseText == "success") {
            window.location = "*****Destination URL********";
        } else {
            alert("error");
        }
    }
};