Question

修改

忘了几个重要的点。

我这样做是为了消除页面不必刷新，因此跳回到页面顶部。

ajax函数的成功函数将重新启动一个新的div id =“comments”，用一个错误消息msg替换现有的一个或者用其下面的所有其他注释替换新的注释。

< / LI>

结束编辑

我一直试图在包装失败的情况下使用这个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脚本。

再次感谢，

Answer 1

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

您开始将变量命名为普通的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;只有1个}}。如果您在http://jsfiddle.net/cori/JsLWq/1/中提交表单，其中包含一个ajax错误处理程序，并查看您的firebug控制台，您将看到由于div_comments未定义而导致引发ReferenceError。

编辑

结合kgarrigan的建议，如果在你的php中循环你想要创建的表单，并使用索引跟踪你的位置，你可以用索引重命名你的表单，所以你的表单php / html代码看起来像什么像：

$div_comments

因此您最终会得到包含<form id="formAddComment-' . $index . '" action="dashboard.php" enctype="multipart/form-data" method="post">等的ID的表单元素

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

formAddComment-1

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

Answer 2

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

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

Answer 3

如果您在同一页面上有多个表单，并且ID相同，则会导致问题。特别是＃formAddComment id，它附加到submit（）调用。如果有多个这些ID，则无效

Answer 4

jquery适用于选择器。当你写$（某事物）时，某些东西就是选择器。它可以是id，类名，变量，html元素。而不是

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

您可以使用

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

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

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

应选择任何表单元素。我认为你的函数的其余部分应该可以正常使用这个更改，因为你使用'this'和parent（）而不是任何直接引用。

JQuery-AJAX后期工作流程

4 个答案: