JQuery AJAX发布工作流


JQuery-AJAX post workflow

编辑

忘记了几个重要的要点。

  1. 我这样做是为了避免页面刷新,从而跳回页面顶部。

  2. ajax函数的成功函数将踢回一个全新的div id="comments",用错误消息替换现有的div,或者用下面的所有其他注释替换新的div

结束编辑

我一直在尝试对这个jquery ajax函数进行封装,但没有成功。我在一个页面上有X个帖子,每个帖子下都有一个插入评论的表格。我认为我已经很接近了,并尝试使用firebug进行调试,但老实说,我真的不知道我在firebug中寻找什么。

所有代码都在下面,如果有任何帮助,我们将不胜感激!

HTML形式和结构(由于重复形式,我觉得我应该使用父jquery选择方法,而不是迭代输出脚本中的每个评论后分区)

    <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脚本。

再次感谢

我在http://jsfiddle.net/cori/JsLWq/,并且当我提交表单时,由于相对的ajax url,我确实会向不存在的http://fiddle.jshell.net/cori/JsLWq/show/includes/comment.php发送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);

然而在这一点上不存在变量CCD_ 3;仅CCD_ 4。如果您在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
});

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

jquery使用选择器。当你写$(something)时,something就是选择器。它可以是id、类名、变量、html元素。所以不是
$("#formAddComment").submit( function(e) {

你可以使用

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

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

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

其应当选择任何形式的元素。我认为函数的其余部分应该可以很好地处理这个更改,因为您使用的是"this"和parent(),而不是任何直接引用。

在firebug中,单击console,然后单击all。当你点击按钮触发ajax调用时,你应该会看到一行弹出,可能有一个加载图标,显示正在发送的post请求。您应该能够点击选项卡来查看发布的数据、给出的响应以及响应状态代码。。。

在您的编辑中,您说success函数将发送一个新的div id="comments"来替换现有的div,但正如您现在所写的,我相信它只会在现有的div中添加一个div id="comments"。但不知道这是否会导致你的问题。

如果在同一页面上有多个表单,并且具有相同的id,这将导致问题。特别是附加到submit()调用的#formAddComment id。如果有多个这样的id,这将不起作用