1

我很好奇如何让我的 AJAX/JQuery 用新的数据库信息更新页面。

对现有问题的研究表明，这些帖子可能会有所帮助：

jQuery AJAX 调用数据库工作，但不是按顺序

jQuery AJAX 使用淡入 + 替换

根据这些建议，我创建了一个 PHP 函数来处理使用 AJAX 发送的数据。在Success上，我淡出旧的 HTML，并用新的 HTML 替换。

问题是第一次单击 DOM 元素时不会显示来自数据库的新数据，但在第二次单击时会显示。我在第二次点击时也得到了不需要的页面刷新。

您可以在以下位置看到一个现场示例（用于我的婚礼网站）： http ://bucketlingerwedding.com/80s-music-reception/

如果您尝试投票，它第一次不起作用，第二次起作用（页面重新加载除外）。

我担心的另一个问题是我不知道是否应该将 cache: 设置为 'false' 或简单地省略。部分问题可能是我使用 replaceWith 加载的新 HTML（我也尝试过 .html()）对于每个表行具有相同的类和 ID。我很好奇，如果我尝试替换单行而不是整个表，并给它一个新的 ID 和类名，JQUERY/AJAX 会用数据库中的新信息淡入该新行吗？

这是我用于 AJAX 的代码（部分基于上面的帖子）：

$(document).ready(function(){
//JQuery for the submission of a new list item.
    $('input.[class$="-arrow"]').click(function(e){
        e.preventDefault(); //put e in function.
        var ajaxurl = '<?php echo the_permalink(); ?>';
        if ($(this).hasClass('up-arrow')) {
            var arrowdirection = 'up';
            var entry = $(this).val();
        }
        else if ($(this).hasClass('down-arrow')) {
            var arrowdirection = 'down';
            var entry = $(this).val();
        }
        var rowid = '.line-items-rows' + '#' + entry;
        var data = {
            action: 'cb_lud_arrow_action',
            arrow: arrowdirection,
            entryID: entry
        };
        $.ajax ({
            cache: false,
            type: 'POST',
            url: ajaxurl,
            data: data,
            success: function(data){
                newtable = '<?php 
                $cb_table_code = plugins_url("list-up-down/table-up-down.php", _FILE_);
                include_once "table-up-down.php";
                echo $cb_lud_new_output;
                ?>';
                $('#cb_lud_table').fadeOut('fast', function(){
                    $(this).replaceWith(newtable).hide();
                    newtable.fadeIn('fast');
                });
                }
        });
});
});

注意：我已经确认使用 AJAX 发布的数据确实更新了数据库表，因此 .php 文件和 ajax POST 方法至少可以正常工作。

我基本上需要的是事件的年表：

  1. 用户投票（点击）表格中的一行。
  2. 数据被发送到 MySQL 数据库，在正确的列中添加投票。
  3. 成功后，函数会从数据库中确定新值并生成新的 html。
  4. 旧数据淡出，新数据淡入。
  5. 大家都开心。

如果这更像是一个 JQuery 解决方案（比如将效果按正确的顺序排列，或者使用 .delay() 函数），或者更像是一个 AJAX 解决方案，我在其中设置回调函数，这对我来说并不重要数据的成功发布，或者与缓存有关的事情。只是想让它工作。请帮忙。

4

2 回答 2

2

使用浏览器控制台查看抛出的错误。newtable只是一个字符串，因此您不能将其用作 jQuery 对象来调用 jQuery 方法。这会在控制台中引发错误，并使您的代码很容易归零。

查看以下输出的源视图：

   newtable = '<?php 
            $cb_table_code = plugins_url("list-up-down/table-up-down.php", _FILE_);
            include_once "table-up-down.php";
            echo $cb_lud_new_output;
            ?>';

您可能不需要任何在 html 字符串中完全重建表格的字符串，但由于整个页面也在 html 中返回，所以它是完全重复的，您可以简单地获取 html 版本本身并删除上面的内容完全地。

改成：

     success: function(data){
           /* convert whole page returned to jquery and get inner html of the table*/
            var newRows=$(data).find('#cb_lud_table').html() 
            $('#cb_lud_table').fadeOut('fast', function(){
                 /* insert new rows*/
                $(this).html(newRows).fadeIn('fast');

            });
            }

一旦你开始工作，你可能还需要重新审视你的点击处理程序是如何附加的（我没有看过）。删除旧的 html 也会删除任何附加的事件。使用on()委托给表，现在将成为永久资产，将补偿更改 html

于 2012-06-20T04:03:49.233 回答
1

您已在变量上使用了 fadeIn 函数。所以它会抛出一个错误 newtable.fadeIn is not a function.You can't use the fadeIn function on the variable. 将 id 或类名提供给 fad​​eIn 函数。

于 2012-06-20T04:03:22.117 回答