使用Ajax动态的显示时间

在最初学习Ajax的时候视频中有一个例子是动态的加载服务器端的时间显示在前台页面，当时不懂原理，看着视频敲了一样的代码，就是运行不出结果，现在在项目中遇到了客户的需求就是需要在前台页面动态的显示时间，刚开始被分配到这个任务的时候有点不知道从哪里下手，心里就感觉自己不会上网查资料做出来发现So Easy!而且还不是一种方法。下面来看以下的两种方法。

第一种：中规中矩的原始Ajax方法。

首先在要显示时间的地方使用任何可以显示文本的标签，本例中使用label

         <label id=lbl></label>

然后开始使用我们在学习Ajax时非常熟悉的XMLHttpRequest对象开始实现。

        <script>function GetXmlHttp()   //判断是否已经存在了XMLHttpRequest对象{return window.XMLHttpRequest ? newXMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");}function GetRequest(){var url ="FHome/GetTime";//URL格式：Controller/方法xmlHttp = GetXmlHttp();          //调用GetXMLHTTP方法,以获得XMLHttpRequest对象xmlHttp.onreadystatechange =OnReadyStateChange;//调用回调方法xmlHttp.open("GET",url, true);xmlHttp.send("");}function OnReadyStateChange(){if(xmlHttp.readyState == 4){document.getElementById("lbl").innerHTML =xmlHttp.responseText + "<br />更新间隔: " +interval + "ms";}}var xmlHttp;varinterval = 1000; //重要的需要设计一个时间间隔vartimer = window.setInterval(GetRequest, interval);//每1000ms调用一次显示时间的方法</script>

最后看一下Controller中的方法

      public ActionResult  GetTime(){         Response.Write(DateTime.Now); //获取现在的时间Response.End();return null;}

第二种：使用JQuery封装好的Ajax

首先前台的要求不变，相应的位置上，任何可以显示文本的标签，这里使用span

       <spanid=time></span>

然后在页面中引入JQuery，版本不限，只有封装了ajax，本例中的版本为1.8.0的

       <scriptsrc="../../Content/JqueryEasyUI/jquery-1.8.0.min.js"></script>

开始调用

       <scripttype="text/javascript">setInterval(GetTime, 1000); //每一秒钟调用一次function GetTime() {$.ajax({type:"post",contentType:"application/json",  //接收到的数据要求格式url:"FHome/GetTime1",        //调用Controller中的方法返回时间success:function (result) {      //如果成功就显示时间       $('#time').text(result);},error: function() {alert(“时间加载失败”);           //失败给出提示}})}</script>

Controller中的方法如下

       publicstring GetTime1(){return DateTime.Now.ToString();}

小结

两种方法一个是原生态的，一个是JQuery-Ajax，相比后者的使用更加的简单，这也是JQuery作用的体现吧，但是本质上是没有区别的，重点都是要设置每1秒调用一次显示时间的方法。两种方法根据自己的实际情况进行选择。

使用Ajax动态的显示时间相关推荐

java时间戳动态,Java实现时间动态显示方法汇总
本文所述实例可以实现Java在界面上动态的显示时间.具体实现方法汇总如下: 1.方法一用TimerTask: 利用java.util.Timer和java.util.TimerTask来做动态更新, ...
ecshop后台实现用ajax动态修改/更新用户评论的时间
2019独角兽企业重金招聘Python工程师标准>>> 刚开始要实现在后台修改用户评论的添加时间,想用表单提交的方式,但是看了后台商品列表页的用ajax实现动态修改,我就萌生了这个用 ...
在html中怎么插入动态图片,如何在gif中插入图片动态图片某1帧插入图片并控制显示时间|动态图片中插入图片...
大家还记得我以前的一个教程嘛?就是如何在视频中插入图片并控制其显示时间,有印象的话就太棒了,没印象的或就点击上边的文字自己做一下功课吧!! 今天的教程内容和上边所讲到的教程有点相似,都是插入图片,但是 ...
java实现动态展示当前时间,在文本框中动态地显示当前时间，有木有人做过，指导下初学者...
在文本框中动态地显示当前时间,有木有人做过,指导下菜鸟? 想在两个文本框中,一个动态显示日期,一个动态显示时间. 如下图这样: 不过这是静态的. 虽然网上有动态的代码,但是javascript的. d ...
html页面获取时间格式,js实现动态获取系统时间，显示到页面上
获取系统时间 //获取系统时间. var dateTime=new Date(); var hh=dateTime.getHours(); var mm=dateTime.getMinutes(); ...
51单片机动态数码管显示时间+protues仿真
项目场景: 纯小白第一次写文章写的不好请见谅做51单片机数码管显示时间实验的时候protues 仿真出现了问题问题描述做51单片机数码管显示时间实验的时候protues 仿真出现了问题仿真 ...
echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称描述 {color}back ...
ajax jsp模糊查询源码,Ajax动态执行模糊查询功能
Ajax动态执行模糊查询功能内容精选换一换 Profiling采集的数据较多,同时解析后展示的性能指标项也比较多,为方便用户快捷查找到具体性能指标的含义,提供命令行查询功能:不包含metric_n ...
Python爬取东方财富网任意股票任意时间段的Ajax动态加载股票数据
导言最近由于需求想爬取以下东方财富网的股票数据,但是发现没有想象那么简单,接下来我会讲述一下我遇到的问题以及是如何解决,最后成功的爬出了想要的数据. 查看网页源码首先我们F12打开东方财富网网页源 ...

使用Ajax动态的显示时间

使用Ajax动态的显示时间相关推荐

最新文章

热门文章