0

编辑

忘记了几个重要的点。

  1. 我这样做是为了消除页面必须刷新并因此跳回页面顶部。

  2. ajax 函数的成功函数将返回一个全新的 div id="comments" 以替换现有的一个错误消息或新的评论以及它下面的所有其他评论。

结束编辑

我一直在尝试封装这个 jquery-ajax 函数，但没有成功。我在一个页面上有 X 个帖子，每个帖子都有一个用于在每个帖子下插入评论的表单。我认为我非常接近并尝试使用 firebug 对其进行调试，但老实说，我真的不知道我在看什么或在 firebug 中查看什么。

所有代码都在下面，任何帮助将不胜感激！

HTML表单和结构（由于表单重复，我觉得应该使用父jquery选择方法，而不是在我的输出脚本中迭代每个post-comment分区）

    <div id="content_body_right">
        <div id="activity">
            ....this is the area for each post....
        </div>
        <div id="comments">
            <p class="comments_label">' . $reply_count . ' Comment</p>
            <div id="comment1">
                <div id="comment_user_img">
                    ' . $imgOutputReply . '
                </div>
                <div id="comment_user">
                    <p class="user_text_comment">' . $firstNameReply . ' ' . $lastNameReply . '</p><p class="date_text_comment">' . $date_timeReply . '</p>
                    <p class="message_text_comment">' . $messageReply . '</p>
                </div>
            </div>
            <div id="add_comment">
                <form id="formAddComment" action="dashboard.php" enctype="multipart/form-data" method="post">
                <div id="add_comment_left">
                    <textarea id="comment" name="comment" cols="75" rows="2">Add a Comment...</textarea> 
                </div>
                <div id="add_comment_right">
                    <input id="userID" name="userID" type="hidden" value="' . $userID . '" />
                    <input id="actID" name="actID" type="hidden" value="' . $actID . '" />
                    <input id="btnComment" name="btnComment" type="submit" value="" title="Add Comment" />
                </div>
                </form>
            </div>
        </div>
    </div>

好的，现在是 JQuery 标记

    <script type="text/javascript">
        $(document).ready(function(){
            $("#formAddComment").submit( function(e) {
                e.preventDefault();
                var form = $(this);
                var div_add_comment = form.parent();
                var div_comments = div_add_comment.parent();
                $.ajax({
                    type: "POST",
                    data: form.serialize(),
                    url: "includes/comment.php",
                    success: function(msg){
                        $div_comments.html(msg);
                    }
                });
                return false;
            });
        });
    </script>

最后是外部 php 脚本（注意：我只会发布将数据馈送本地化到 php vars 的初始行。）

    if(isset($_POST['actID'])){
        $actID = mysql_real_escape_string($_POST['actID']);
        $userID = mysql_real_escape_string($_POST['userID']);
        $comment = mysql_real_escape_string($_POST['comment']);
          ............other processing here...........
    }

我主要怀疑我的 jquery 脚本。

再次感谢，

4

4 回答 4

1

我将一般结构放入http://jsfiddle.net/cori/JsLWq/http://fiddle.jshell.net/cori/JsLWq/show/includes/comment.php的 jsfiddle 中，当我提交表单时，由于相对的 ajax url，我确实得到了一个不存在的 ajax POST ，所以这不是据我所知，这个问题。我认为问题在于您正在混合变量命名规则。

你开始命名你的变量，比如普通的 javascript 对象

var form = $(this);
var div_add_comment = form.parent();
var div_comments = div_add_comment.parent();

但随后在您的成功处理程序中，您切换到相当常见的$x约定，通常用于指示变量是 jQuery 实例：

$div_comments.html(msg);

但是那时没有变量$div_comments；只有div_comments. 如果你在http://jsfiddle.net/cori/JsLWq/1/中提交表单，它有一个 ajax 错误处理程序，并查看你的 firebug 控制台，你会看到你得到一个 ReferenceError 因为$div_comments未定义。

编辑

结合 kgarrigan 的建议，如果在您的 php 中循环遍历要创建的表单，并使用索引跟踪您的位置，您可以使用索引重命名表单，因此您的表单 php/html 代码如下所示：

<form id="formAddComment-' . $index . '" action="dashboard.php" enctype="multipart/form-data" method="post">

所以你最终会得到带有 id 之类的表单元素formAddComment-1。

然后在您的 jquery 中，您将使用startsWith选择器选择所有表单并将提交事件绑定到它们，因此：

$('[id^="formAddComment"]').submit( function(e) {
    // do your ajax
});

这样每个表单都有自己的提交处理程序。

于 2013-02-13T06:19:36.080 回答
0

在 firebug 中，单击控制台，然后单击全部。当您单击按钮触发您的 ajax 调用时，您应该会看到一行弹出，可能带有一个显示正在发送的发布请求的加载图标。您应该能够单击选项卡以查看正在发布的数据和给出的响应以及响应状态代码...

在您的编辑中，您说成功功能将发送一个新的 div id="comments" 来替换现有的，但是正如您现在所写的那样，我相信它只会在现有的内部添加一个 div id="comments"一。不知道这是否会导致您的问题。

于 2013-02-13T04:53:12.377 回答
0

如果您在同一页面上有多个表单，并且 id 相同，这将导致问题。尤其是 #formAddComment id，它附加在 submit() 调用中。如果有多个这些 id，这将不起作用

于 2013-02-13T07:05:30.360 回答
0

jquery 与选择器一起使用。当你写 $(something) 时，某事就是选择器。它可以是 id、类名、变量、html 元素。所以而不是

$("#formAddComment").submit( function(e) {

你可以使用

$(".someclassName").submit( function(e) {

就像 css 一样，使用 # 作为 id，. 上课。只需确保将 class 属性添加到具有相同名称的表单中即可。你也可以试试

$("form").submit(function(e) {

它应该选择任何表单元素。我认为你的函数的其余部分应该可以正常工作，因为你使用的是 'this' 和 parent() 而不是任何直接引用。

于 2013-02-13T07:48:08.747 回答