ajax 出现json页面,jQuery-Ajax请求Json数据并加载在前端页面，无刷新加载网页显示...

Ajax技术在目前主流的网站上应用非常广泛，这是一种异步加载技术，无需刷新网页即可更新网站内容，全局或者局部均可，所以大家应该学会这种技巧，把技术用起来，你会喜欢上这种用户体验非常好的交互。

过去我们按F5或者点鼠标刷新网页有两个缺点：

一是，如果有声音的电脑，会听到刷新时的提示音，用AJAX请求就不会有这种响声了；

二是，如果网页打开慢的情况下，整个网页显示空白，用AJAX刷新时，只针对需要刷新的部份才需要更新，其他内容保持不变

这对于电脑内存或者临时缓存也更友好。

下面给大家一个简单的例子，便于产生学习兴趣。

HTML代码如下：

jQuery - Ajax - Json

$(function(){

$("button").click(function(){

$.ajax({

type:"GET",

url:"test.php",

dataType:"json",

success:function(data){

$("#date").text(data.date);

$("#time").text(data.time);

}

})

})

})

加载数据

日期:

时间:

这个HTML页，你可以命名为任意文件名，然后把你保存好的这个HTML文件放在你的WEB测试目录，再到同级目录建立一个PHP文件，合名为test.php 代码如下：

$date=date('Y-m-d');

$time=date('H:i:s');

$str='{"date":"'.$date.'","time":"'.$time.'"}';

echo $str;

?>

当我们打开这个WEB页面时，如下图：

当我们点击加载数据后，显示如下图：

每点击一次，就会从PHP文件中动态取出时间，并且体会不到是在整个页面刷新，而只需要刷新日期和时间这个位置，是不是很方便呢？

本文仅代表作者个人观点，不代表SEO研究协会网官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员。更多相关资讯，请到SEO研究协会网www.seoxiehui.cn学习互联网营销技术请到巨推学院www.jutuiedu.com。