Разбор Ajax ответа с использованием jQuery

Question

1. У меня есть функция php, которая генерирует календарь на текущий месяц с кнопкой для следующего и предыдущего месяцев.
2. У меня также есть файл js, который отслеживает событие щелчка и генерирует календарь на следующий или предыдущий месяц.
3. Я получаю данные календаря из функции php (как определено в шаге 1) с помощью функции ajax. 1006

Мой 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");
            }
        });
    });
});

Вывод My Console для календаря предыдущего месяца

 <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>

Answer 1

Предполагая, что вы хотите заменить текущий .calendar новым HTML, возвращенным вызовом AJAX:

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

Answer 2

Попробуйте получить элемент, в котором находится календарь, и установить его значение .inner HTML для вывода:

element.innerHTML = response;

Если календарь находится в элементе с другими элементами, вы можете удалить календарь и используйте оператор + =, чтобы добавить его в конец, или создайте div для календаря.