Jquery 在Ajax启动模式时显示WP内容

我试图弄清楚我的模式文件是如何不显示我的WP内容的，如果我尝试其他内容，结果会是500（内部服务器错误），尽管我已经弄清楚了内部服务器错误的原因。这是我手机上的代码

<?php include '/wp-blog-header.php'; ?>

<?php $postname = new WP_Query([ 'post_type' => 'causes', 'posts_per_page' => 1, 'p' => $_POST['key'] ]); ?>
<?php while ( $postname->have_posts() ) : $postname->the_post(); ?>
<div class="uk-modal-dialog">
  <a class="uk-modal-close uk-close"></a>
  <div class="fetched-data">
    this is modal popup
    <?php echo $post->post_name; ?>
  </div>
</div>
<?php endwhile; wp_reset_postdata(); ?>

注意

我将模态文件更新为以下外观：

<?php 
  require '../../../../../../wp-load.php';
  require '../../../../../../wp-blog-header.php';

  echo $postKey = $_POST['key'];
  global $post;
  $args = array( 'post_type' => 'causes', 'posts_per_page' => 1, 'p' => $postKey );
  $posts = get_posts( $args );
?>

<?php foreach ($posts as $post) : setup_postdata( $post ); ?>
<div class="uk-modal-dialog">
  <a class="uk-modal-close uk-close"></a>
  <div class="fetched-data">
    <p>this is modal popup</p>
    <?php the_title(); ?>
  </div>
</div>
<?php endforeach; ?>

这是模态弹出窗口

尽管Ajax错误一直显示在我的模式中。

您需要在页面顶部包含“wp load.php”文件，以便首先执行WordPress函数

include("../../../wp-load.php");

要调用“modal.php”文件，您可以设置类似的代码，如果您在php文件中设置了脚本

$.ajax({
        type: "POST",
        cache: false,
        dataType: "json",
        url: <?php echo get_template_directory_uri(); ?>"/inc/structures/modal/modal-donate.php",
        data: { key : postID },
        success: function(data) {
          $('.uk-modal').html(data);
        }           
      });

$.ajax({
类型：“POST”，
cache:false，
数据类型：“json”，
url:“/inc/structures/modal/modal.php”，
数据：{key:posted}，
成功：功能（数据）{
$（'.uk modal'）.html（数据）；
}           
});

我发现

数据类型：“json”

是我在这里出错的原因，所以在我再次阅读jQuery Ajax文档后，我发现我的案例问题只是回到了“html”类型。这是我问题的完整解决方案

$(document).ready(function(){
  $('.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: "POST",
        cache: false,
        dataType: "html",
        url: "wp-content/themes/mytheme/inc/structures/modal/modal-donate.php",
        data: { key : postID },
        success: function(data) {
          $('.uk-modal').html(data);
        }           
      });
    }
  });
});

---

实际上，我通过

scripts.min.js

启动Ajax来调用Modal“Modal.php”…虽然我完全删除了

500（内部服务器错误）

，但Ajax错误在执行Modal后仍然会出现一点延迟。好的，我现在发现了问题…我更新了

数据类型：“json”“

到

数据类型：“html”

现在可以正常工作了。

$(document).ready(function(){
  $('.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: "POST",
        cache: false,
        dataType: "html",
        url: "wp-content/themes/mytheme/inc/structures/modal/modal-donate.php",
        data: { key : postID },
        success: function(data) {
          $('.uk-modal').html(data);
        }           
      });
    }
  });
});