将数据保存到MySQL并使用该数据更新页面而不刷新

Question

我正在尝试将评论表单中的数据保存到MySQL数据库中，然后使用该注释更新页面，而无需用户刷新。 类似于Facebook评论的工作方式。

我到处搜索了这个问题的答案，但我找不到符合我需求的答案。

这是将表单数据提交到php脚本的AJAX：

var ajaxSubmit = function(formEl) {
    // fetch where we want to submit the form to
    var url = $(formEl).attr('action');

    // fetch the data for the form
    var data = $(formEl).serializeArray();

    // setup the ajax request
    $.ajax({
        url: url,
        data: data,
        dataType: 'json',
        success: function(data) {
            if(rsp.success) {
                alert("Comment Successfully Added!");
        }
    });
  return false;
}

我知道目前不会使用此脚本更新页面，因为我正在调用警报。 但是，当我提交数据时，我将被带到/ajax/comment.process.php页面，该页面是调用insertComment()函数并将注释插入数据库的页面。 我现在在success()函数中有alert()函数，我甚至没有得到它。

我想要的是，当提交评论时，用户不会离开当前页面，只是更新他们刚提交的内容。

这是/ajax/comment.process.php'的代码

    session_start();

include_once('../classes/comment.class.php');
include_once('../classes/db.class.php');

$user_id = $_SESSION['user_id'];

$db = new DBConnection;
$comments = new Comment($db);

$blog_id = intval($_POST['blogID']);

$addCom = $comments->addComment($user_id);

if($addCom === FALSE) {
    $resp = "<span class='error'>Error adding comment</span>";
} else {

    $resp = $comments->getComments($blog_id);
}

return $resp;

此脚本调用insertComment()函数将注释保存到数据库，然后如果返回true，则调用getComments()函数，该函数检索该特定帖子的注释并将其存储在数组中。

这些评论被成功保存到数据库中，但我重定向到ajax/comment.process.php页是空白。 如何使用他们发布的评论更新当前页面而无需刷新页面？ 我认为返回$resp变量会执行它然后我可以只做一个foreach()循环来显示它们，但显然不是这种情况。

编辑：我已经在下面的答案中提出了一切建议，我还没有解决这个问题。 表单是STILL提交给/ajax/comment.process.php即使我有三个应该阻止提交表单的东西： preventDefault(); ， return false; 并return ajaxSubmit(this);

Answer 1

在ajax中你可以删除dataType: 'json',并删除if(rsp.success) {并发出一个简单的警报

$.ajax({
        url: url,
        data: data,
        success: function(data) {
                alert("Comment Successfully Added!");
                alert(data);
        }
});

在php而不是你正在使用的返回中，使用echo

echo $resp;

至少你会看到是否有错误

之后，您可以开始使用json代码

在PHP中

echo json_encode($resp);//as soon as $resp is an array

并且在ajax中你可以像这个alert(data.keyofthearray)一样alert(data.keyofthearray)

Answer 2

要防止表单提交（正在发生的事情），请使用onsubmit="return ajaxSubmit(this);"

你的ajax代码中也有语法错误。 你永远不会关闭if块

var data = $(formEl).serialize();
$.ajax({
    url: url,
    data: data,
    dataType: 'json',
    success: function(data) {
        if(data.success) {
            alert("Comment Successfully Added!");
        }
    }
});