ajax异步刷新邂逅了你—innerHTML

前端之家收集整理的这篇文章主要介绍了ajax异步刷新邂逅了你—innerHTML前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

猜你在找的Ajax相关文章