Javascript 传递PHP变量ID以创建和获取动态模式内容

我在这里尝试了几个答案，但我想我完全无法解决我的问题

因此，我正在为书籍文章创建不同帖子的帖子列表，每一篇文章都有不同的内容可从后端拉出。为了简化多次单击页面，我选择使用模态。从一些引导模式答案中获得一些信息，将其与我的UIKit模式进行比较/使用，但它似乎无法正常工作

这是WordPress和UIKit Modal的核心功能的混合

代码图1

<a href="" class="uk-button uk-button-primary uk-width-1-1" data-content="<?php echo $post->ID; ?>" data-uk-modal="{target:'#book-info',bgclose:false,center:true}"><?php echo $book_button; ?></a>

-Ajax脚本

代码图3

<?php
$postID = $_GET['data'];
$postname = new WP_Query([ 'post_type' => 'causes', 'posts_per_page' => 1, 'p' => $postID ]);

while ( $postname->have_posts() ) : $postname->the_post();

  the_field('content_modal_box');
  echo '<br>';
  echo $post->post_name;

endwhile;

wp_reset_postdata();

---

好的，过了一段时间，我开始调试我的全部代码，并做了更多的研究。这是解决我问题的有效方法

首先，我确实意识到我传递的数据是“空的”，这是导致我的模态结果“500（内部服务器错误）”的原因。其次，我的Ajax“Data”也不知道我的变量值，因为它是空的。当触发模式打开时，没有
数据内容
传递到我的任何脚本

解决方案

<a href="" class="uk-button uk-button-primary uk-width-1-1 open-modal" data-content="<?php echo $post->ID; ?>" data-uk-modal="{target:'#book-info'}"><?php echo $book_button; ?></a>

-修订的Ajax脚本

在意识到这里的一切之后。一切顺利，工作正常。我修改了Ajax脚本，并匹配了我在“modal book.php”文件上使用的
类型
函数，并添加了将事件模态更改为模态的原始js脚本，因为我在关闭模态时难以清除内容。
那么，
$postname
的值是多少（什么是
WP\u Query
）在你的modal_book.php？
$postname
中，这是我如何通过使用
'p'=>$postID
连接文章帖子的
$postID
指定了我单击的按钮的ID。虽然我不清楚我是否做对了。这会导致我出现服务器错误。至于你的问题，我看不出有什么价值。但是如果我把它放在同一个文件中，它会把最新的文章放到帖子中。我的意思是-你的php脚本
modal\u book.php
如何知道
WP\u Query
类定义在哪里？另外，学习如何在
error.log
中检查你的错误。对不起，我已经迷路了。事实上，我只是按照我从这个答案中看到的脚本，希望我做得正确。对于error.log，我不知道在哪里查看，因为我正在使用Mamp Pro。
<?php
$postID = $_GET['data'];
$postname = new WP_Query([ 'post_type' => 'causes', 'posts_per_page' => 1, 'p' => $postID ]);

while ( $postname->have_posts() ) : $postname->the_post();

  the_field('content_modal_box');
  echo '<br>';
  echo $post->post_name;

endwhile;

wp_reset_postdata();

<a href="" class="uk-button uk-button-primary uk-width-1-1 open-modal" data-content="<?php echo $post->ID; ?>" data-uk-modal="{target:'#book-info'}"><?php echo $book_button; ?></a>

$('.open-modal').on('click', function(){
  var postID = $(this).attr('data-content');

  var modal = UIkit.modal(".uk-modal", {center: true, bgclose: false});

  if ( modal.isActive() ) {
    modal.hide();
  } else {
    modal.show();

    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: 'wp-content/themes/mytheme/inc/structures/modal/modal-donate.php',
      data: 'data='+postID,
      success: function(data) {
        $('.fetched-data').html(data);
      }
    });
  }

});