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

原文链接：https://www.f2er.com/ajax/161573.html

ajax异步刷新邂逅了你—innerHTML

异步刷新

下面便是innerHTML的一个小例子

猜你在找的Ajax相关文章