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

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

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

	

		
使用ajax请求的数据
		

			
		
	
	
	

文件二：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 +='
+value.title+
';
			});
			//即使请求了生成的静态news.htmls文件，静态new.htmls文件jq也会动态将数据到静态news.htmls静态文件中
			$("#hot_html").html(html);
		}else{
			//todo
		}
	},
});

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

 $code,
    		'message' => $message,
    		'data' => $data,				
    	);
    	//将数据转换成json数据并输出使ajax接收
    	echo json_encode($result);
    }
?>