ajax异步刷新邂逅了你—innerHTML

2016-12-20 08:26:21来源:CSDN作者:Ljm15832631631人点击

第七城市

        innerHTML这个属性做过ITOO项目的应该都不陌生,用来设置或获取位于对象起始和结束标签内的HTML。(获取HTML当前标签的起始和结束里面的内容), 经常利用它实现信息的动态显示。在项目中进行Ajax异步刷新时才刚刚接触到,这里面还有一段小插曲:


异步刷新


<span style="float: right; padding-right: 30px;font-size:20px;font-family: KaiTi;position:absolute;right:5px;top:40px;" class="head";>欢迎您: @Session["username"] 总积分: <span id="myGrade" style="font-size:18px;"></span> 

 
setInterval(function () {    queryGrade();},1000);//1秒刷新function queryGrade(){    $.ajax({        type: "POST",        url: "/frmQuestion/GetNewGrade",        datatype: "JSON",        success: function (data) {            document.getElementById("myGrade").innerHTML = data;//与innerHTML遇见            console.log(data);        }    });

 public string GetNewGrade()        {            if (Session["userId"] != null)//这一定要进行null值判断,因为这用的是session值            {                string userID = Session["userid"].ToString();                return new QuestionBLL().GetNewGrade(userID);            }            return null;        }

         这个便是用来进行异步刷新的代码,这个主要是想做这个功能如图:



        这个积分在提交问卷后需要立即刷新,开始时是获取的session里面的值,但是session的刷新只有退出后才可以再次刷新,于是便用其他方法不用session来获值了直接从数据库获值,然后动态刷新既可以了,这就需要用到ajax了,问题来了,将这个值 如何显示呢,如何接收这个值呢?也就用到了innerHTML,效果就如上面的照片一样。


下面便是innerHTML的一个小例子


 看看这个例子:<html> <head>  <script>    function Test(){//将后面的那些字符串的属性,赋值给id为s的那行      document.getElementById("s").innerHTML="<br /><br />"+Math.random();      setTimeout('Test();',1000); //1秒执行1次Test()函数    }    function Test1() {      alert("单击之前w的之值: "+document.getElementById("w").innerHTML);      var str1 = "单击之后"      document.getElementById("w").innerHTML=str1;      document.getElementById("AlbumList").innerHTML="<table><tr>";      alert(document.getElementById("AlbumList").innerHTML);   }  </script> </head> <body onload=Test();>   <p id="s"></p>   <p id="w">你好!!!!!!</p>   <button onclick="Test1()">单击之前</button>   <div id="AlbumList"></div> </body></html>  innerHTML自带了语法检查功能,他会自动把不完整的HTML代码补充完整.运行如下的一个测试代码就可以发现了.document.getElementById("AlbumList").innerHTML="<table><tr>";alert(document.getElementById("AlbumList").innerHTML);他会自动把我的代码里面添加了<tbody>和</tr></table>等标记.神奇!!!所以在网页中,我们经常这样用;<div id="content"></div><script language="javascript">   document.getElementById("content").innerHTML="需显示的内容";</script>这样就会在id 是content的标记那里显示"需显示的内容";


 

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台