聊聊wordpress使用ajax加载内容

百度百科对ajax的定义：

AJAX即“Asynchronous?Javascript?And?XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步?JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

现在小编遇到的需求是这样的，在没有跳转(不刷新页面)的情况下，点击列表链接，弹框加载内容数据，OK，第一时间我们会想到使用ajax。说到ajax，实际开发中用的非常多、比如，弹框登陆注册，公司之前做的移动端web应用几乎全是ajax加载数据。使用体验上更加顺畅。

关于wordpress ajax弹框加载内容具体使用：

使用也是很简单，这里以jquery的ajax为例：首先获取列表的内容链接，返回链接的数据，append到弹框即可完成ajax加载！

效果图如下：

以上效果都是以动画效果呈现，不会重新刷新页面跳转。

列表代码如下：

弹框代码：[news-part.php]

?<div class=”news-tk”>

<img id=”animation5″ class=”close_news” src=”<?php bloginfo(‘template_directory’); ?>/img/anli/close.png” alt=””>

<div class=”news-contant” id=”animation5″>

<div class=”news-xq-right”>

<!–news content ?ajax load （我们需要将ajax返回的数据加入到此弹框中）–>

</div>

</div>

</div>

列表代码：[news-part.php]

?<article id=”JsSolutionBlock” class=”Solution Box”>

<div class=”Box__cell is-right news_cell”>

<div class=”Box__inner”>

<h2>新闻中心</h2>

<div class=”newslist”>

<?php if(have_posts()):while(have_posts()):the_post();?>

<div class=”item”>

<a href=”<?php the_permalink() ?>”> <img src=”<?php echo catch_first_image(‘c’) ?>” alt=”<?php echo get_the_title(); ?>”>

<p><?php echo get_the_title(); ?></p> </a>

</div>

<?php endwhile;endif;?>

</div>

</div>

</div>

</article>

上方代码中 <a href=”<?php the_permalink() ?>”></a> 是列表的文章内容地址[news-single.php]，也是我们需要获取的地址。

news-single.php代码如下：

<div class=”xq-content”>

<?php

$post = $wp_query->post;

if(have_posts()):while(have_posts()):the_post();?>

<h2><?php echo get_the_title(); ?></h2>

<?php the_content(”); ?>

<?php endwhile;endif;?>

</div>

之后我们需要在开始写jquery ajax代码了，记得要引入jquery，具体ajax如下[wangzheng.js]

//新闻ajax加载内容

$(function(){

$(“.newslist .item a”).click(function(){ ? //点击a链接

var href=$(this).attr(“href”); ? //获取a链接地址(也就是内容地址)

if(href != undefined){ ? //如果链接存在

$.ajax({ ? ? ?//使用ajax请求数据

url:href, ? ? ? //请求的地址就是上面获得到的

type:”get”, ? ? ?//请求类型为get

error:function(request){

alert(“拜拜！”);

},

success:function(data){ ? //请求成功后

$(“.xq-content”).remove(); ? //为了避免重复，我们每次请求出现数据之前，应将上次请求的数据删除，不然会重复出现

$(“.news-tk”).show(); ? //弹框

$(‘.news-xq-right’).append(data); ? //将数据append到弹框的内容区域

}

});

}

return false;

});

})

这样我们就实现了ajax加载数据了！