如何点击导航无刷新切换页面
目前页面我已经使用ajax加载josn数据了 但是导航这个有点懵，跨域我是自己用php吧接口又处理了一下解决了，但是 这个点击导航无刷新加载页面我还是不太会！
页面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新闻头条</title>
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="./ajax.js"></script>
<script>
$(function(){
/*初始化*/
var counter = 0; /*计数器*/
var pageStart = 0; /*offset*/
var pageSize = 4; /*size*/
/*首次加载*/
getData(pageStart, pageSize);
/*监听加载更多*/
$(".js-load-more").live('click', function(){
//$(".js-load-more").text('加载中...');
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
});
});
</script>
</head>
<body>
<div class="main">
<ul class="nav nav-tabs" id="daohang">
<li><a href="#" id="maintitle">今日新闻</a></li>
<li><a href="?type=top">头条</a></li>
<li><a href="?type=shehui">社会</a></li>
<li><a href="?type=guonei">国内</a></li>
<li><a href="?type=guoji">国际</a></li>
<li><a href="?type=yule">娱乐</a></li>
<li><a href="?type=tiyu">体育</a></li>
<li><a href="?type=junshi">军事</a></li>
<li><a href="?type=keji">科技</a></li>
<li><a href="?type=caijing">财经</a></li>
<li><a href="?type=shishang">时尚</a></li>
</ul>
<div class="js-blog-list"></div>
<!--加载更多按钮-->
<div class="js-load-more">加载更多</div>
</div>
</body>
</html>
ajax.js代码如下：
function getData(offset,size){
var matchs = /[?&](?:type=)?([^=&]+)(?![^&]*=)/.exec(location.search);
var types = (matchs != null) ? matchs[1] : false;
$.ajax({
type: 'GET',
url: 'http://localhost/newapi.php?type='+types,
// beforeSend: function(){
// $('.js-load-more').text('加载中');
// },
dataType: 'json',
success: function(reponse){
var data = reponse.result.data;
var sum = data.length;
var result = '';
/****业务逻辑块：实现拼接html内容并append到页面*********/
//console.log(offset , size, sum);
/*如果剩下的记录数不够分页，就让分页数取剩下的记录数
* 例如分页数是5，只剩2条，则只取2条
* 实际MySQL查询时不写这个不会有问题
*/
if(sum - offset < size ){
size = sum - offset;
}
/*使用for循环模拟SQL里的limit(offset,size)*/
for(var i=offset; i< (offset+size); i++){
if(!data[i].thumbnail_pic_s02){
data[i].thumbnail_pic_s02=data[i].thumbnail_pic_s;
}
if(!data[i].thumbnail_pic_s03){
data[i].thumbnail_pic_s03=data[i].thumbnail_pic_s;
}
result +='<div class="item">'+
'<h2><b>[ '+data[i].category+' ]</b> '+
'<a href="'+ data[i].url +'" target="_blank">'+ data[i].title +
'</h2></a>'+
'<p>'+data[i].author_name+'<span>'+data[i].date+'</span></p>'+
'<div class="pic">'+
'<img src="'+data[i].thumbnail_pic_s+'"/>'+
'<img src="'+data[i].thumbnail_pic_s02+'"/>'+
'<img src="'+data[i].thumbnail_pic_s03+'"/></div>'+
'</div>';
}
$('.js-blog-list').append(result);
/*******************************************/
/*隐藏more按钮*/
if ( (offset + size) >= sum){
$(".js-load-more").hide();
}else{
$(".js-load-more").show();
}
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}最后，附上接口 newapi.php:
<?php
//error_reporting(E_ALL & ~E_NOTICE);
header("Content-type: text/html; charset=utf-8");
//配置您申请的appkey
$appkey = "*******";
//************新闻头条列表************
$url = "http://v.juhe.cn/toutiao/index";
$params = array(
"type" => !empty($_GET['type'])?$_GET['type']:"top",//新闻类型，默认top
"key" => $appkey,//应用APPKEY
);
$paramstring = http_build_query($params);
$content = juhecurl($url,$paramstring);
print_r($content);
// $result = json_decode($content,true);
// if($result){
// if($result['error_code']=='0'){
// print_r($result);
// }else{
// echo $result['error_code'].":".$result['reason'];
// }
// }else{
// echo "请求失败";
// }
/**
* 请求接口返回内容
* @param string $url [请求的URL地址]
* @param string $params [请求的参数]
* @param int $ipost [是否采用POST形式]
* @return string
*/
function juhecurl($url,$params=false,$ispost=0){
$httpInfo = array();
$ch = curl_init();
curl_setopt( $ch, CURLOPT_HTTP_VERSION , CURL_HTTP_VERSION_1_1 );
curl_setopt( $ch, CURLOPT_USERAGENT , 'JuheData' );
curl_setopt( $ch, CURLOPT_CONNECTTIMEOUT , 60 );
curl_setopt( $ch, CURLOPT_TIMEOUT , 60);
curl_setopt( $ch, CURLOPT_RETURNTRANSFER , true );
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
if( $ispost )
{
curl_setopt( $ch , CURLOPT_POST , true );
curl_setopt( $ch , CURLOPT_POSTFIELDS , $params );
curl_setopt( $ch , CURLOPT_URL , $url );
}
else
{
if($params){
curl_setopt( $ch , CURLOPT_URL , $url.'?'.$params );
}else{
curl_setopt( $ch , CURLOPT_URL , $url);
}
}
$response = curl_exec( $ch );
if ($response === FALSE) {
//echo "cURL Error: " . curl_error($ch);
return false;
}
$httpCode = curl_getinfo( $ch , CURLINFO_HTTP_CODE );
$httpInfo = array_merge( $httpInfo , curl_getinfo( $ch ) );
curl_close( $ch );
return $response;
}求大神指点一下，感激不尽
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你的代码过程是这样的：点击a标签，地址栏变了（页面刷新），然后你通过正则抓取type，发起ajax。
这样修改即可：将<a>的href事件屏蔽掉，把type绑在自定义属性上，添加click事件(去加载数据)。