如何在弹出窗口中通过 ajax 显示内容

Question

我想显示一个弹出窗口，其中的内容来自另一个文件。 现在，当弹出窗口的内容出现在同一页面上时，我正在使用此代码显示弹出窗口。

 jQuery(".item").click(function(e) {
    var currentID = jQuery(this).attr("id");

    jQuery.ajax({
        method: "POST",
        url: "some.php",
        data: {
            name: "John",
            location: "Boston"
        }
    })


    .done(function(msg) {
        jQuery(".popup-overlay").html(msg);
        jQuery("." + currentID).fadeIn(300, function() {
            jQuery(this).focus();
        });
            jQuery(".popup-overlay").show();
        });
  });

我能不能把要在弹出窗口中显示的内容放在其他文件中，然后在上面的代码中传递文件的路径

这将是 ajax.php 中的代码

<?php include("wp-load.php"); ?> 

  <div class="popup-overlay">
  <?php  
  $args = array(
           'post_type' => 'portfolio',
           );
  $loop=new WP_Query;
  $count=1;
  if($loop->have_posts()):whiile(have_posts()) :the_post();  
  ?>
  <div class="popup-box <?php echo $count; ?> ">
      <div class="inner-box">        
      </div>
  </div> 
<?php
$count;
endwhile;
endif;
?>
</div>

现在它正在获取 ajax.php 中的所有 div。

它应该只显示具有 class="currentID" 的 div

Answer 1

这是一个如何在 WordPress 中使用 AJAX 的基本示例。它展示了如何从 javascript 中获取一个变量，将其传递给 PHP 函数（稍微改变一下），然后将其传递回 javascript。

这假设您已经知道如何将 javascript 加入队列等。

Javascript Piece（可以在 header.php 或 footer.php 或需要的模板文件中添加。）

jQuery(document).ready(function($) {

    // We'll pass this variable to the PHP function example_ajax_request
    var fruit = 'Banana';

    // This does the ajax request
    $.ajax({
        url: ajaxurl,
        data: {
            'action':'example_ajax_request',
            'fruit' : fruit
        },
        success:function(data) {
            // This outputs the result of the ajax request
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });  

});

PHP Piece（必须包含在functions.php中）

function example_ajax_request() {

    // The $_REQUEST contains all the data sent via ajax
    if ( isset($_REQUEST) ) {

        $fruit = $_REQUEST['fruit'];

        // Let's take the data that was sent and do something with it
        if ( $fruit == 'Banana' ) {
            $fruit = 'Apple';
        }

        // Now we'll return it to the javascript function
        // Anything outputted will be returned in the response
        echo $fruit;

        // If you're debugging, it might be useful to see what was sent in the $_REQUEST
        // print_r($_REQUEST);

    }

    // Always die in functions echoing ajax content
   die();
}

add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );
add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );


// If you wanted to also use the function for non-logged in users (in a theme for example)
// add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

Answer 2

你可以像这样添加 ajax 请求。

jQuery(".item").click(function(e) {
    var currentID = jQuery(this).attr("id");

    jQuery.ajax({
        method: "POST",
        url: "some.php",
        data: {
            id: currentID,
            location: "Boston"
        }
    })


    .done(function(msg) {
            jQuery(".popup-overlay").html(msg);

            jQuery(".popup-overlay").show();
        });
    });

你 ajax.php 应该喜欢检查它并更新我..

<?php include("wp-load.php");
$id=$_GET['id'];
 ?> 

  <div class="popup-overlay">
  <?php  
  $args = array( 'post__in' => $sss, 'post_type' => 'portfolio',);
  $loop=new WP_Query;
  $count=1;
  if($loop->have_posts()):whiile(have_posts()) :the_post();  
if($count==$id) {
  ?>
  <div class="popup-box <?php echo $count; ?> ">
      <div class="inner-box">        
      </div>
  </div> 
<?php  }
$count;
endwhile;
endif;
?>