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()函数的页面，并将注释插入数据库。我现在在alert()函数中有success()函数，我甚至没有得到它。

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

以下是/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()函数，该函数检索该特定帖子的注释并将其存储在数组中

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

编辑：我已经在下面的答案中提出了一切建议，我还没有解决这个问题。即使我有三件可能阻止提交表单的内容，表单仍然提交给/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)

那样提醒

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!");
        }
    }
});

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

2 个答案: