Загрузка php файла с AJAX в веб-интерфейсе Wordpress

Question

Испытание AJAX запроса в первый раз и возникшая проблема. Я хочу загрузить файл php по нажатию кнопки на сайте Wordpress. К настоящему времени после исследования я получил этот код:

1. index. php file:

   <button id="ajaxbtn">Ajax</button>
   <div id="ajax">Some Text</div>
   

2. ajax. php файл (файл, который я хочу загрузить):

   <?php echo "Hello!" ?>
   

3. функции. php файл:

   add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
   function myajax_data(){
   
      wp_localize_script('menu_toggle', 'myajax', 
        array(
          'ajax_url' => admin_url('admin-ajax.php')
        )
      );  
   
   }
   
   add_action('wp_ajax_tablo', 'tablo');
   add_action('wp_ajax_nopriv_tablo', 'tablo');
   
   function tablo() {
   
     // Grab php file output from server
     ob_start();
     include(get_template_directory_uri() . '/ajax.php');
     $result['content'] = ob_get_contents(); 
     $result = json_encode($result); // use wp_send_json instead to make this shorter
     echo $result;
     die();
   }
   

4. menu_toggle Файл js (файл js с кодом ajax):

   $("#ajaxbtn").click(function () {
     $.ajax({
       type : 'post',
       dataType : 'json',
       url : myajax.ajax_url,
       data : {action: 'tablo'},
       success: function(response) {
         //load the fetched php file into the div
         alert('Load was performed.');
         $('#ajax').append("hello"); 
         $('#ajax').load(response.content);
       }
     });
   });
   

Я действительно могу отображать alert('Load was performed.'); и $('#ajax').append("hello");, так что это означает, что ajax был подключен правильно, а ajax запрос работает правильно. Но $('#ajax').load(response.content); загружает всю ту же индексную страницу в # ajax div вместо загрузки содержимого ajax. php файла, который я на самом деле хочу. Возможно, я получил неправильный код либо в function tablo() файле функций. php, либо в ajax коде файла menu_toggle. js. Может кто-нибудь помочь с этим?

Answer 1

Четан Вагела только что помог с этой проблемой на wordpress.stackexchange.com. Если кто-то сталкивается с той же проблемой, что и я, пожалуйста, проверьте ответ Chetan Vaghela ниже:

Решение, предоставленное Chetan Vaghela на wordpress.stackexchange.com

Answer 2

Вам необходимо преобразовать / проанализировать данные json в JS, поступающие из PHP. Как:

var res = JSON.parse(response);

Полный код выглядит так:

$("#ajaxbtn").click(function () {
  $.ajax({
    type : 'post',
    dataType : 'json',
    url : myajax.ajax_url,
    data : {action: 'tablo'},
    success: function(response) {
      //load the fetched php file into the div
      var res = JSON.parse(response);

      alert('Load was performed.');
      $('#ajax').append("hello"); 
      $('#ajax').load(res.content);
    }
  });
});