AJAX调用接口实现静态页面局部动态化的简单例子

最新推荐文章于 2024-07-28 17:31:47 发布

日光微暖〆夏亦凉

最新推荐文章于 2024-07-28 17:31:47 发布

阅读量1w

点赞数 1

本文链接：https://blog.csdn.net/u011132987/article/details/48423637

版权

web端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文件一：前端模板文件news.html。

用于嵌套php语句加载数据库内容后生产news.htmls静态文件。

<html>
<head>
<title>文章首页</title>
<!-- 引入query -->
<script src="/public/js/jquery.js"></script>
</head>
<body>
	<div>
		<p>使用ajax请求的数据</p>
		<ul>
			<!-- 此处使用jq加载动态数据 -->
		</ul>
	</div>
	<!-- 引入使用jquery编写的ajax脚本 -->
	<script src="/public/js/articleList.js"></script>
</body>
</html>

文件二：articleList.js文件。

$.ajax({
	//接口地址
	url:'http://static.com/api/hot.php',
	//请求方式
	type:'get',
	//返回数据类型
	dataType:'json',
	//请求失败时处理方式
	error:function(){},
	//请求成功时处理方式
	success:function(result){
		if(result.code == 1){
			//将从接口返回的数据拼装html语句
			html = '';
			$.each(result.data,function(key,value){
				html +='<li><a href="##">+value.title+</li>';
			});
			//即使请求了生成的静态news.htmls文件，静态new.htmls文件jq也会动态将数据到静态news.htmls静态文件中
			$("#hot_html").html(html);
		}else{
			//todo
		}
	},
});

文件三：接口文件-news.php。

<?php 
	/***************此处***************/
	/*从数据库查询的结果并组装成了一个数组$arrRes*/
	/*******************************/
	
    //调用show方法封装并返回接口数据
    return show(1,'',$arrRes);
	
    function show($code,$message,$data){
    	$resule=array(
    		'code' => $code,
    		'message' => $message,
    		'data' => $data,				
    	);
    	//将数据转换成json数据并输出使ajax接收
    	echo json_encode($result);
    }
?>