使用 jQuery 解析 Ajax 响应答案

【问题标题】：Parsing Ajax response using jQuery使用 jQuery 解析 Ajax 响应
【发布时间】：2020-05-07 01:33:17
【问题描述】：

我有一个 php 函数，它为当前的日历生成日历下个月和上个月的按钮。
我还有一个js文件，监控点击事件，生成next或者日历前一个月。
我正在使用 ajax 函数从 php 函数（如步骤 1 中定义）中获取日历数据。

点击按钮后，我在控制台日志中观察到所有上/下个月的日历数据，但不知道如何解析数据以使用最新的日历数据更新当前页面。

我的js代码

jQuery(document).ready(function(){ 
    jQuery('#prev_button_id').click(function(){
        jQuery.ajax({
            url: frontend_object.plugin_url_info + '/includes/previous_month.php',
            success: (response)=>{
                console.log(response);
            },
            error:(response)=>{
           console.log("prev month not loaded");
            }
        });
    });
});

上个月日历的我的控制台输出

 <table class='calendar'>
<div class = 'month_block'
><input id='prev_button_id' class='prev_button' type='button' value = '&#8249 Previous'/>
<div class = 'month'>April 2020</div>
<a class='next_button' href='TBD'>Next &#8250</a>
</div><tr><th class='header'>S</th><th class='header'>M</th><th class='header'>T</th><th class='header'>W</th><th class='header'>T</th><th class='header'>F</th><th class='header'>S</th></tr><tr><td colspan='3'>&nbsp;</td><td class='day' rel='2020-04-01'>1</td><td class='day' rel='2020-04-02'>2</td><td class='day' rel='2020-04-03'>3</td><td class='day' rel='2020-04-04'>4</td></tr><tr><td class='day' rel='2020-04-05'>5</td><td class='day' rel='2020-04-06'>6</td><td class='day' rel='2020-04-07'>7</td><td class='day' rel='2020-04-08'>8</td><td class='day' rel='2020-04-09'>9</td><td class='day' rel='2020-04-10'>10</td><td class='day' rel='2020-04-11'>11</td></tr><tr><td class='day' rel='2020-04-12'>12</td><td class='day' rel='2020-04-13'>13</td><td class='day' rel='2020-04-14'>14</td><td class='day' rel='2020-04-15'>15</td><td class='day' rel='2020-04-16'>16</td><td class='day' rel='2020-04-17'>17</td><td class='day' rel='2020-04-18'>18</td></tr><tr><td class='day' rel='2020-04-19'>19</td><td class='day' rel='2020-04-20'>20</td><td class='day' rel='2020-04-21'>21</td><td class='day' rel='2020-04-22'>22</td><td class='day' rel='2020-04-23'>23</td><td class='day' rel='2020-04-24'>24</td><td class='day' rel='2020-04-25'>25</td></tr><tr><td class='day' rel='2020-04-26'>26</td><td class='day' rel='2020-04-27'>27</td><td class='day' rel='2020-04-28'>28</td><td class='day' rel='2020-04-29'>29</td><td class='day' rel='2020-04-30'>30</td><td colspan='2'>&nbsp;</td></tr></table>

【问题讨论】：

previous_month.php 返回的究竟是什么 HTML？
@kmoser，previous_month.php 正在返回上个月的日历详细信息。我粘贴了函数返回的确切响应（请参阅主要问题中的控制台输出）。我需要了解，如何从该响应中提取数据并更新当前页面

标签： php jquery ajax wordpress

【解决方案1】：

假设您想用 AJAX 调用返回的新 HTML 替换当前的 .calendar：

success: (response) => {
    $('.calendar').replaceWith( response );
}

【讨论】：

这正是我所需要的，但只需要稍作调整。上面的代码替换了整个日历，除了 div class= 'month_block' 中的内容。不知道为什么会这样。现在我有意外的文本“”，然后是整个 4 月的日历。 @kmoser
我的 html 结构存在问题，我已修复。这正是我一直在寻找的。谢谢@kmoser。

【解决方案2】：

尝试获取日历所在的元素并将其 .innerHTML 值设置为输出：

element.innerHTML = response;

如果日历在包含其他元素的元素中，您可以删除日历并使用 += 运算符将其添加到末尾，或者为日历创建一个 div。

【讨论】：

我试过“console.log(jQuery('.calendar').innerHTML);”但似乎没有工作。我在控制台日志中得到“未定义”
那是因为.innerHTML 不适用于 jQuery 返回的对象。请参阅我的答案以获得可能的解决方案。
@Learner 这可能是因为您要替换日历的（我假设 .calendar 是日历）innerHTML。相反，日历需要在一个 div 中，您可以替换它的 innerHTML。将 innerHTML 视为元素中的代码。但是， kmoser 的答案看起来会更好。我自己很少使用 JQuery。