js ajax php 原生代码写 新闻选项卡

本文介绍了一个使用JS、AJAX和PHP实现的简单新闻轮播系统,该系统包括新闻选项卡布局、动态加载新闻内容及跳转到详情页等功能。



利用js ajax php做的一个小的新闻选项卡,



文件名news_card1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0; padding: 0; border: 0;}
			a{
				text-decoration: none;
				color: #000;
			}
			.wrap{
				height: 380px;
				width:30%;
				margin: auto;
				overflow: hidden;
				border: 1px solid #000;
			}
			ul{
				text-align: center;
				height: 40px;
				
			}
			li{
				line-height: 40px;
				background-color:dodgerblue;
				list-style: none;
				text-align: center;
				display: inline-block;
				width:130px;
				color:white;
				font-size: 22px;
				font-family:  "微软雅黑";
				border-radius: 10px;
			}
			li:hover{
				color:red;
				cursor:hand;
				cursor: pointer;
			}
			.content{
				width: 85%;
				margin: auto;text-align: left;
			
			}
			img{
				width: 100%;
				height: 110px;
			}
			figure{
				display: inline-block;
				width: 45%;
				margin-top: 30px;
				margin-left: 15px;
				text-align: center;
				vertical-align:top;
			}
			figcaption{
				font-size: 12px;
			}
			figure:hover figcaption{
				color: #ff5500;
			}
			p{
				margin-top: 50px;
			}
			p a:hover{
				color: #ff5500;
			}
			.on{
				color:red;
				cursor:hand;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li index=0>新闻</li>    
				<li index=1>科技</li>
				<li index=2>军事航空</li>
			</ul>
			<div class="content">
			</div>
		</div>
	</body>
</html>
一个很简单的布局 
网页效果大致如下

下面就是js部分了

<script type="text/javascript">
	
	var liList=document.getElementsByTagName('li');            //首先获取li
	var content=document.getElementsByClassName('content')[0];  //并且获取内容区域
	
for(var i=0;i<liList.length;i++){                           // 对li进行遍历的到每个li
		var _li=liList[i];
		_li.onmouseover=function(){                  //给每个li一个鼠标移上时的事件
			var _obj=this.getAttribute('index'); // 并且得到每个 index值
			AJax(_obj);                          //
		}
	}
	
	
	function AJax(_obj){
		var xhr=new XMLHttpRequest();                          //利用ajax技术向后端发送请求并且接收回来的数据 四部
		xhr.open("GET","php/news_card1.php?obj="+_obj,true);   //
		xhr.send();
		xhr.onreadystatechange=function(){                    
			if(xhr.readyState==4&&xhr.status==200){   //对页面状态status和ajax请求状态判断 
				var str=xhr.responseText;         //ajax后台的程序发送xmlhttp请求的时候,后台程序接到请求会进行处理
                                                                  //处理接收以后,可以返回一串数据给前台,这个就是responsetext
				var arr=JSON.parse(str);          //因为php用的是Json语法编写 所以需要json解析
				var result="";                    //接收标签
				
				
				for(var i=0;i<arr.length;i++){    //对解析出来的arr遍历
					var _new=arr[i];           //
					var _id=_new["id"];        //
					var _title=_new["title"];    //
					var _img=_new["img"];        // 
					if(_obj==0||_obj==2){
						result+="<p id=''+_id+''><a href='detail.html?title="+_id+"&bigclassify="+_obj+"' target='_blank'>"+_title+"</a></p>";    //静态网页发送数据也是用的get方法,给新闻网站加上id和obj是区分点开的新闻网页
					}else{
						result+="<figure id=''+_id+''><a href='detail_img.html?title="+_id+"&bigclassify="+_obj+"' target='_blank'><img src='"+_img+"'><figcaption>"+_title+"</figcaption></a></figure>";
					}
				}
				content.innerHTML=result;
			}
		}
	}
</script>


news_card1.php文件

<?php
	$obj=$_GET["obj"];
	if($obj=="0"){
		echo '[{"id":"001","title":"新闻1"},
		{"id":"002","title":"新闻2"},
		{"id":"003","title":"新闻3"}]';
	}else if($obj=="1"){
		echo '[{"id":"001","img":"img/1.jpg","title":"新闻1"},
		{"id":"002","img":"img/2.jpg","title":"新闻2"},
		{"id":"003","img":"img/3.jpg","title":"新闻3"},
		{"id":"003","img":"img/4.jpg","title":"新闻4"}]';
	}else if($obj=="2"){
		echo '[{"id":"001","title":"新闻1"},
		{"id":"002","title":"新闻2"},
		{"id":"003","title":"新闻3"}]';
	}
?>

detail.html文件这个页面是新闻详细页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			h1,h3,h4{
				text-align: center;
			}
			p{
				width: 80%;
				margin: auto;
				text-indent:32px;
				text-align: justify;
				line-height: 2;
			}
		</style>
	</head>
	<body>
		<h1></h1>
		<h3></h3>
		<h4></h4>
		<p></p>
	</body>
</html>

js内容

<script type="text/javascript">
	var _h1=document.getElementsByTagName('h1')[0];
	var _h3=document.getElementsByTagName('h3')[0];
	var _h4=document.getElementsByTagName('h4')[0];
	var _p=document.getElementsByTagName('p')[0];
	//通过url地址获取title 和 bigclassify的值       //获取页面地址并且对地址进行解析,得到 title和bigclassify
	var _url=location.href;    
	var params=_url.split("?")[1];    //title=001&bigclassify=1  
	var parList=params.split("&"); 
	var _title=parList[0].split("=")[1];  //001
	var _bigclassify=parList[1].split("=")[1];    //1
	AJax(_title,_bigclassify)
	function AJax(_title,_bigclassify){
		var xhr=new XMLHttpRequest(); 
		xhr.open("GET","php/detail.php?title="+_title+"&bigclassify="+_bigclassify,true);
		xhr.send();
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4&&xhr.status==200){ 
				var str=xhr.responseText;
				var info=JSON.parse(str);
				var _title=info.title;
				var _date=info.date;
				var _author=info.author; 
				var _body=info.body;
				_h1.innerHTML=_title;
				_h3.innerHTML=_date;
				_h4.innerHTML=_author;
				_p.innerHTML=_body;

			}
		}
	}
</script>

detail.php界面

<?php
	$title=$_GET["title"];
	$bigclassify=$_GET["bigclassify"];
	if($bigclassify=="0"){
		if($title=="001"){
			echo '{"title":"田雨1","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}';
		}else if($title=="002"){
			echo '{"title":"田雨2","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}';		}else if($title=="003"){
			echo '{"title":"田雨3","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}';		}
	}else if($bigclassify=="1"){
		if($title=="001"){
			echo '{"title":"田雨4","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}';		}else if($title=="002"){
			echo '{"title":"田雨5","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}';		}else if($title=="003"){
			echo '{"title":"田雨6","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}';		}
	}else if($bigclassify=="2"){
		if($title=="001"){
			echo '{"title":"田雨7","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}';		}else if($title=="002"){
			echo '{"title":"田雨8","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}';		}else if($title=="003"){
			echo '{"title":"田雨9","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}';		}
	}
?>

图片新闻的详细页面原理和这个一样所以不做详解了 



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前路莫回眸丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值