inedx.html:
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<style type="text/css"> ul @H_301_41@{ font-size: 14pt; } </style>
<script type="text/javascript"> function loadData(txt) { var request = new XMLHttpRequest(); var method = "GET"; var url = txt + ".json"; request.open(method,url); request.send(null); request.onreadystatechange = function() { if(request.readyState == 4) { if(request.status == 200) { @H_403_103@//返回的是JSON数据 var result = request.responseText; @H_403_103@//把返回的字符串转换为javascript对象 var JSONObject = eval('(' + result + ')'); var name = JSONObject.name; var email = JSONObject.email; var h2Node = document.createElement("h2"); h2Node.appendChild(document.createTextNode(name)); var pNode = document.createElement("p"); pNode.appendChild(document.createTextNode(email)); var detail = document.getElementById("detail"); @H_403_103@//清空div原来的内容 detail.innerHTML = ""; detail.appendChild(h2Node); detail.appendChild(pNode); } } } } </script>
</head>
<body>
<p>点击对应会显示详细信息,ajax请求服务器上的数据，将详细信息显示在下方</p>
<ul>
<li>
<a onclick="loadData('AAA')">AAA</a>
</li>
<li>
<a onclick="loadData('BBB')">BBB</a>
</li>
<li>
<a onclick="loadData('CCC')">CCC</a>
</li>
</ul>
<div id="detail"></div>
</body>
</html>
AAA.json:
{
"name": "AAA","email": "AAA@gmail.com" }
BBB.json:
{
"name": "BBB","email": "BBBB@gmail.com" }
CCC.json:
{
"name": "CCC","email": "CCC@gmail.com" }
