XML+Ajax
--------------XML部分----------html
<?xml version="1.0" encoding="utf-8"?> <xyj> <person> <name>唐僧</name> <sex>男</sex> <info>大唐高僧</info> </person> <person> <name>孫悟空</name> <sex>男</sex> <info>齊天大聖</info> </person> <person> <name>豬八戒</name> <sex>男</sex> <info>天蓬元帥</info> </person> <person> <name>沙悟淨</name> <sex>男</sex> <info>捲簾大將</info> </person> </xyj>
---------HTML和JS部分------------node
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select>
<option value="唐僧">唐僧</option><!--這裏的value必定要有，否則IE6出不來-->
<option value="孫悟空">孫悟空</option>
<option value="豬八戒">豬八戒</option>
<option value="沙悟淨">沙悟淨</option>
</select>
<div></div>
</body>
<script>
var select=document.getElementsByTagName("select")[0];
var div=document.getElementsByTagName("div")[0];
select.onchange=function(){
var val=this.value;
var xmlHttp=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
xmlHttp.open("GET",'xyj.xml');
xmlHttp.send();//發送
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
var xml=xmlHttp.responseXML;
//alert(xml);
//alert(xml.getElementsByTagName("person")[0].getElementsByTagName("name")[0].innerHTML)
var person=xml.getElementsByTagName("person");
for(var i=0;i<person.length;i++){
var name=person[i].getElementsByTagName("name")[0].firstChild.nodeValue;//IE不支持在XML裏面用innerHTML找文本，可是在HTML是能夠用的
if(name==val){
var sex=person[i].getElementsByTagName("sex")[0].firstChild.nodeValue;
var info=person[i].getElementsByTagName("info")[0].firstChild.nodeValue;
div.innerHTML=sex+"<br/>"+info;
return;
}
}
div.innerHTML="未找到結果";
}
};
};
select.onchange();//打開頁面觸發一次
</script>
</html>
相關文章
- 1. ajax傳Long數組到springMVC再到Mybitys刪除過程
- 2. JS 基礎篇(發佈訂閱模式)
- 3. web前端開發——AJAX入門
- 4. Python爬蟲連載1-urllib.request和chardet包使用方式
- 5. 分享一些免費接口
- 6. 2018年6月前端面試經歷(上)
- 更多相關文章...
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
