Ajax 测试（wordpress）

Question

所以，我一直在努力使 ajax 工作。 这是我之前的问题：AJAX (admin_url('admin-ajax.php');?action=) Not Found

无论如何，我决定缩小范围，只保留必要的文件。

这里是设置。

test.php

  <div class="test">
       <a href="#test_demo" id="demo">Items</a>      
  </div>
  <div id="test_demo"> </div>  


<script>

  jQuery(document).ready(function() {
     jQuery('.test a').click(function(e) {
        e.preventDefault();

        var tab_id = jQuery('this').attr('id'); 


        jQuery.ajax({
            type: "GET",
            url: "<?php echo admin_url('admin-ajax.php'); ?>", 
            dataType: 'html',
            data: ({ action: 'test_tab', id: tab_id}),
            success: function(data){
                  jQuery('#test_' + tab_id).html(data);

        },
        error: function(data)  
        {  
        alert("Error!");
        return false;
        }  

        }); 

     }); 
     }); 


</script>

function.php

function test_tab_callback() {       
    $template_part_path = 'page-parts/test_' . $_GET['id'];
    get_template_part($template_part_path);
    exit;
 }
add_action('wp_ajax_test_tab', 'test_tab_callback');
add_action('wp_ajax_nopriv_test_tab', 'test_tab_callback');

test_demo.php

<div id="test_demo_content">Demo Content</div>

这是我对它应该如何工作的想法。

1. test.php：当用户点击Items按钮时，jQuery中的tab_id变量保存了锚点id（本例中为id="demo"）。
2. 然后调用admin-ajax.php。
3. 然后将保存的 id ("demo") 传递到 function.php 并在变量 $template_part_path = 'page-parts/test_' . $_GET['id']; 中使用，该变量为 page-parts/test_demo 提供 test_demo.php

4. 然后调用模板部分，回调给jQuery。

5. 然后将数据“插入”到jQuery('#test_' + tab_id).html(data);，即id="test_demo。

6. test_demo.php 内容应该显示在#test_demo div 中。

但它不起作用。我使用了console.log(data)，但没有显示任何结果。 我做错了什么？

Answer 1

当您获得“this”的 jquery 对象时，您不能使用引号。这使 tab_id 成为未定义并破坏了其余部分。

这就是我的意思：

http://jsfiddle.net/7r1dg7L4/2/

jQuery(document).ready(function() {
     jQuery('.test a').click(function(e) {
         e.preventDefault();
         var tab_id = jQuery(this).attr('id'); 
         alert(tab_id);
     });
});