ajax - JQuery/Ajax - 使用 .replaceWith 或 .html 调用数据库后在页面中加载新数据？

Question

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

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

jQuery AJAX calls to database work, but not in order

jQuery AJAX using fadeIn + replaceWith

根据这些建议，我创建了一个 PHP 函数来处理使用 AJAX 发送的数据。 成功后，我淡出旧的 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 解决方案(我在其中设置回调)，对我来说并不重要基于数据成功发布的功能，或者与缓存有关的东西。只是想让它发挥作用。请帮忙。

Answer 1

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

在源 View 中查看以下输出:

   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 也会删除附加的所有事件。使用委托(delegate)给表的 on() ，该表现在将成为永久 Assets ，将补偿对 html 的更改