我想用我从数据库中使用Ajax从另一个数据库文件中获取的数据填充表单元素

Question

I am trying to populate my form elements with a row fetched from a database. I am trying to use ajax to send the id of the row i want to fetch when a button is clicked.

I am trying to use ajax. I have successfully retrieved the row i want in the php file but cant send the data back to the requesting page.

My table has edit and delete buttons for each row.

while ($row = mysqli_fetch_array($result)) {
    echo '<tr style="margin:10px;">';
    echo "<td>".$row['title']."</td>";
    echo "<td>".$row['uname']."<td>";
    echo '<td><button class="btn btn-warning" onClick="editBtnClicked('.$row['id'].')">Edit</button><td>';
    echo '<td><button class="btn btn-danger" onClick="deleteBtnClicked('.$row['id'].')">Delete</button><td>';
    echo "</tr>";
}

And my script looks like this:

function editBtnClicked(id) {
    $.ajax({
        type: 'post',
        url: 'edit.php',
        data: { edit_id: id },
        success: function (data) {
            // ...
        }
    })
}

And my edit.php file:

$id= $_POST['edit_id'];

$stmt= "SELECT * FROM blog WHERE id=".$id;

$result= $conn->query($stmt);

$rows = $result->fetch_assoc();

I want to send $rows['name'] and $rows['body'] to the page that contains the table and populate a form that has two text areas with it.

Answer 1

At the end of your edit.php file, add this line

echo json_encode($rows);

Modify your function like this: (I am assuming that your name and body textareas have ids nameTextArea and bodyTextArea respectively.)

function editBtnClicked(id) {
    $.ajax({
        type: 'post',
        url: 'edit.php',
        data: { edit_id: id },
        success: function (data) {
            console.log(data);
            $('#nameTextArea').val(data.name);
            $('#bodyTextArea').val(data.body);
        }
    })
}