使用AJAX将POST内容加载到div中

时间:2016-08-15 作者:TravelWhere

我当前正在使用<!––nextpage––> 将我的内容拆分为多个页面。以下是我的示例帖子内容:

<a href="http://linktopage.com/2/"><img src="blah1.jpg" alt=""/></a><!--nextpage-->
<a href="http://linktopage.com/3/"><img src="blahab.jpg" alt=""/></a><!--nextpage-->
<a href="http://linktopage.com/4/"><img src="blahco.jpg" alt=""/></a><!--nextpage-->
<a href="http://linktopage.com/5/"><img src="blahneat.jpg" alt=""/></a>
基本上所有图像都超链接到下一页。当用户单击图像时,我希望通过ajax将下一页加载到现有div中。

我该怎么做?

1 个回复
最合适的回答,由SO网友:bynicolas 整理而成

您要求加载下一页,但如果您只需要图像,则加载整个页面是没有意义的。下面的内容就可以做到这一点。

The HTML

至少添加一个包装器div来隔离我们要替换的图像,这样就可以在ajax响应中搜索我们要用来替换当前图像的新图像。

<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/2/"><img src="blah1.jpg" alt=""/></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/3/"><img src="blahab.jpg" alt=""/></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/4/"><img src="blahco.jpg" alt=""/></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/5/"><img src="blahneat.jpg" alt=""/></a></div>

The Javascript

这应该放在您现有的$(document).ready(function(){ ... }); 作用

$(\'body\').on(\'click\', \'.image-wrap\', function(e) { // listen for \'click\' on our \'.image-wrap\' element
  e.preventDefault();  // Prevents default behavior on the a element

  $.ajax({

    url: $(this).find( \'a\' ).attr( \'href\' ), // the url we are fetching by ajax
    success: function (response) {

      newImg = $(response).find(\'.image-wrap\').html(), // get the new href link and image from the response, contained in div.image-wrap

      $( \'div.image-wrap\' ).html( newImg ); // set the new html for our inner div

    }
  }).fail(function (data) {

    if ( window.console && window.console.log ) {

      console.log( data );  // log failure to console

    }

  });

});

EDIT

要添加脚本,请通过wp_enqueue_script 只需将此添加到functions.php

add_action( \'wp_enqueue_scripts\' \'my_custom_js\');
function my_custom_js(){
  wp_enqueue_script( \'main-js\', get_stylesheet_directory_uri() . \'/js/main.js\' , array( \'jquery\' ), \'1.0.0\', true );
}
然后在你的themes folder 创建文件main.js 在a中js 文件夹,然后向其中添加上面的javascript代码。文件应位于theme_folder/js/main.js 上述脚本应加载到document ready中

$(document).ready(function(){
  // Script
});
的参数wp_enqueue_script 功能如下

参数1:脚本句柄。应该是唯一的名称,用于标识正在加载的脚本。例如,如果需要取消注册脚本,可以调用wp_dequeue_script 然后用这个把手

  • 参数2:您正在加载的文件的位置
  • 参数3:此文件的依赖项数组(应该在之前加载的文件,这里我们需要jQuery参数4:此文件的版本(可选)
  • 参数5:脚本是在页面开始时加载还是在关闭之前加载</body> 标签true 交割前的平均值</body> 标签违约false
  • 相关推荐

    从短码函数中添加到_Content或变量

    我创建了一个自定义快捷码,用于向所选词汇表术语添加弹出定义。短代码如下所示:[glossary term="data breach"]data breaches[/glossary] 该函数在名为“词汇表术语”的自定义帖子类型中搜索帖子,以获取术语的定义,将其打印在div中,并将所附文本转换为指向该div的链接:function glossary_shortcode( $atts = array(), $shortcode_content = null ) {