付费节点推荐

免费节点

节点使用教程

百度百科对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加载数据了！

未经允许不得转载：Bcoder资源网 » 聊聊wordpress使用ajax加载内容

相关推荐