ajax动态刷新

来源:互联网 发布:淘宝双十一交易情况 编辑:程序博客网 时间:2024/06/16 06:00


<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>教师选课</title>
<link href="css/Tselection.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
</header>
<article>
<h2>教师课程选择</h2>
<div id="details">
<label for="str">教师所授课程:</label>
<select id="str" name="str">
<option>嵌入式系统开发与应用教程</option>
<option>现代管理学</option>
<option>软件工程导论</option>
<option>编译原理</option>
<option>计算机控制技术</option>
<option>马克思主义基本原理概论</option>
<option>大学生就业指导教程</option>
<option>数据库系统概论</option>
<option>数据结构与算法设计</option>
<option>C/C++程序设计</option>
<option>java程序设计</option>
</select><br /><br />
<input type="button" onclick="show();" value="提交"/>
<h2>教师所选所有课程</h2>
<!--<p id="txt"></p>-->
</div>
</article>
<footer></footer>
<script type="text/javascript">
function show(){
var txt=document.createElement("p");
var details=document.getElementById("details");
var str=document.getElementById("str").value;
details.appendChild(txt);
            var xmlhttp;
            if (str.length==0)
            {
            txt.innerHTML="";
           // document.getElementById("txt").innerHTML="";
            return;
            }
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
           txt.innerHTML=xmlhttp.responseText;
            }
            }
            xmlhttp.open("GET","ajax.php?q="+str,true);
            xmlhttp.send();
   }
</script>
</body>
</html>
0 0