如何使用ajax和jquery从我的数据库中检索记录？

Question

I'm trying to retrieve records from my db using a button without the page refreshing. I'm not familiar with ajax and i've been having a hard time getting it to work. Here's what I have so far. any help would be appreciated, thank you

<h3>Avaiable assignments</h3><br>
<script>
 $(document).ready(function () {
$('#button1').click(function (e) {
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: "getItem.php",
        dataType: "html",
        success: function (msg) {
            if (msg.success) {
            $("#responsecontainer").html(msg);
        } else {
            alert("error");
        }
    }
    });
  });
});

<br>
 <input name="button1" type="submit" id="button1" 
value="Picked" />

my getItem.php

<?php
include("connect.php");
$q = intval($_GET['q']);


if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"items");
$sql="SELECT * FROM items WHERE LIMIT 1 OFFSET 1";
$result = mysqli_query($con,$sql);


while($row = mysqli_fetch_array($result))
{
echo $row['items'];
}

mysqli_close($con);
?>

Answer 1

Your best bet is to start in the Network tab of the browser's developer tools. There, you can see the outgoing request and what it comes back with.

Bring up your form in the browser and fire off the click event. Then, find the request to 'getItem.php' and look at its response. If it's not what you expect, set getItem.php to echo 'hello' and die; if the network tab does not show 'hello' in the response, that means you're not hitting the endpoint. If you see 'hello', congratulations, you're close!

In terms of your actual endpoint, I see you are repeatedly echoing the results of your query. This is not the most useful way to do this. Instead, json_encode the entire results set, echo that, and kill the script. This will return all your table rows as a JSON array which can then be read by javascript back on the client side.. I hope any of this helps!