ajax异步刷新邂逅了你—innerHTML

来源：互联网发布：淘宝盗图技巧不被发现编辑：程序博客网时间：2024/06/06 19:32

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的标记那里显示"需显示的内容";

1 0