javascript - Ajax不存储数据

Question

我有一个程序，我可以在没有 JavaScript 的情况下添加数据。但我想使用AJAX，但不知道为什么它不起作用。当我单击“添加”按钮时，它没有发生任何事情，并且我在 phpmyadmin 中看不到数据。谁能帮我吗？

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

您仅将其作为 $_POST 数据发送:

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

这应该只会导致 $_POST['name'] => VALUE

但是您正在读取 $_POST['content']; 和其他变量。您还可以检查 $_POST['add'] 是否由您的 AJAX 发送。更改您用于在一侧发送/读取数据的键，并尝试将其他键/值添加到您的数据中，例如

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

uid 和 date 是您可能想要在 control.php 中动态创建的内容。但不要从 $_POST

读取它们

添加:进一步阅读与您的用例相匹配的示例:https://scotch.io/tutorials/submitting-ajax-forms-with-jquery