通过表单提交输入新行后，如何使用AJAX刷新数据库表？

Question

Long time reader, first question. I should note that I am a beginner.

My page displays a discography of records. It has two parts: 1. A form to enter a new row into the records table. 2. The records table echoed from the database.

Currently, a user can fill out the form, click "submit" and the new row is INSERTed into the records table.

I want to use AJAX so that the records table is automatically refreshed when the form's submit button is clicked.

I'll post shortened versions of the code below.

The form is already submitted via AJAX with this code (I got from a tutorial):

$(function() {
    // Get the form.
    var form = $('#formInsert');
    // Get the messages div.
    var formMessages = $('#form-messages');
    // Set up an event listener for the contact form.
    $(form).submit(function(e) {
        // Stop the browser from submitting the form.
        e.preventDefault();
        // Serialize the form data.
        var formData = $(form).serialize();
        // Submit the form using AJAX.
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response) {
            // Make sure that the formMessages div has the 'success' class.
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');
            // Set the message text.
            $(formMessages).text(response);
            // Clear the form.
            $('#front_cover').val('');
            [many lines omitted]
        })

        .fail(function(data) {
            // Make sure that the formMessages div has the 'error' class.
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');
            // Set the message text.
            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('There\'s some kinda love, and there\'s some kind error.');
            }
        });
    });
});

Here is the HTML:

<div id="form-messages"></div>
<form id="formInsert" method="post" action="formInsert.php">
[lots of form fields]
<button type="submit" class="btn btn-outline-success" id="submitDB" name="submit">Submit</button>
</form>        

<!-- Here is the echoed table from database-->
<hr>
<div id="databaseTable">        
   <? include('tableData.php'); ?>
</div>

Here is the PHP for form action (formInsert.php):

<?php
[database connection here]
// This script inserts a record into the records table
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $band = strip_tags(stripslashes(trim(htmlentities($_POST['band']))));
    $title = strip_tags(stripslashes(trim(htmlentities($_POST['title']))));
    //other fields omitted for space

    $result = $db->insert('records', array(
        "band"=> $band, 
        "title"=> $title, 
        //other fields omitted for space
    ));
        if ($result) { // If it ran OK
        $success =  '<div class="alert alert-success" role="alert">entry successful</div>'; 
} 

And finally here is the dataTable.php. This is what I want to be updated automatically via AJAX when the "submit" button is pressed.

<table class='table-sm' id='recordsDB'>
        <colgroup>
            <col style='width:'><col style='width:'><col style='width:'><col style='width:150px'><col style='width:'>
            <col style='width:'><col style='width:'><col style='width:350px'><col style='width:350px'><col style='width:'>
            <col style='width:'><col style='width:'><col style='width:'><col style='width:'><col style='width:'>
            <col style='width:'><col style='width:'><col style='width:'><col style='width:'><col style='width:350px'>
        </colgroup>
    <tr>
    <th>Edit </th>  
    <th> Band </th> 
    <th> Title </th>   
    // other fields omitted for space

    <?php       
     $db = app('db');
    // Make the query            
    $result = $db->select(
        "SELECT * FROM `records` ORDER BY db_code ASC, band ASC, title ASC"
        );
    // output data of each row
    foreach($result as $row) {
        echo "<tr><td><a href='edit_record.php?release_id=" .$row['release_id'] . "'>Edit</a></td> 
        <td>".$row["band"]."</td>
        <td>".$row["title"]."</td>;
        */other fields omitted for space/*
    }   
    ?>
    </table>

I really appreciate you making it this far! Is there anyway to use AJAX (or update the current AJAX) to refresh the table when the submit button is clicked for a new row INSERT?

Answer 1

You are currently rendering the table server side and updating it via AJAX would modify the table and render the new row client side. It can be done, but I strongly recommend doing it all the same way.

The simplest approach given your existing code, is to simply post the insert fields to the same page. Then check the POST data and perform the INSERT as needed before running the SELECT query and rendering the table.

If you prefer to go with an AJAX approach I recommend using a jQuery plugin like https://datatables.net/ . Then in PHP you would simply return the JSON encoded query results.