Ajax不存储数据

Question

I have a program which I am able to add datas without javascript. But I would like to use AJAX and I do not know why it does not work. When I click Add button it does happen nothing and I do not see the data in phpmyadmin. Can anyone help me?

index.php:

session_start();
require_once("auth.php");
require_once("control.php"); 

<div class="well well-sm bs-component">
    <div class="form-group row add">
    <form method="post" action="">
        <div class="col-md-12">
         <label for="content" class="control-label">Your Comment</label>
            <input type="hidden" name="uid" value="<?= $id; ?>">
            <input type="hidden" name="date" value="<?= date('Y-m-d H:i:s') ?>">
            <textarea  id="content" name="content" class="form-control" rows="3" placeholder="Enter your comment..." required></textarea>
            <p class="error text-center alert alert-danger hidden"></p>
        </div>
        <div class="addButton col-md-12">
            <button class="btn" type="submit" id="add" name="add">
                <span class="glyphicon glyphicon-plus"></span> SEND
            </button>
        </div>
    </div>
    </form>      
</div>

control.php:

//ADD COMMENT
if ( isset($_POST['add']) ) {
$id = $_POST['uid'];
$date = $_POST['date'];
$content = $_POST['content'];

$sql= "INSERT INTO posts (uid, content, date) VALUES ('$id', '$content', '$date')";

if (!$mysqli->query($sql)) {
 header("location: error.php");
}
}

Javascript:

$("#add").click(function() {

var formData = {
    'name': $('#content').val()
    };


    $.ajax({
        type: 'post',
        url: 'control.php',
        data: formData,
        success: function(data) {
            if ((data.errors)){
                $('.error').removeClass('hidden');
                $('.error').text(data.errors.name);
            }
            else { 
                $('.error').addClass('hidden');
                $('#table').prepend("<div class='item" + data.id + " mess'><div class='btn-group-sm'><button class='edit-modal btn btn-circle' data-id=" + data.id + " data-name=" + data.name +"><span class='glyphicon glyphicon-pencil'></span></button><button class='delete-modal btn btn-circle' data-id=" + data.id + " data-name=" + data.name +"><span class='glyphicon glyphicon-trash'></span></button></div><article class='myMessage'><p>" + data.name + "</p></article></div><div class='clear' style='clear: both;''></div>");
            }
        },

    });
    $('#content').val('');

});

Answer 1

You are sending only this as the $_POST data:

var formData = {
    'name': $('#content').val()
};

Which should result only to $_POST['name'] => VALUE

But you are reading from $_POST['content']; and other vars. You also check for $_POST['add'] which is not being sent by your AJAX. Change the key, you are using to send/read the data on one side and also try to add the other keys/values to your data, e.g.

var formData = {
    'add': 'yes',
    'content': $('#content').val(),
    'uid': SOMEVALUE,
    'date': SOMEVALUE
};

The uid and the date are things you might wanna create in your control.php dynamically anyway. But then don't read them from $_POST

ADDITION: Further reading with an example that matches your use case: https://scotch.io/tutorials/submitting-ajax-forms-with-jquery