<script> var lis = document.getElementById('list').getElementsByTagName('li'); //页面加载完毕运行initpage() window.onload = initPage; function initPage() { for (var i=0; i<lis.length; i++) { //遍历lis 给每个li标签绑定事件 lis[i].onclick = function () { //每个li标签都有一个点击事件getdetails,参数为当前点击的元素的id getDetails(this.id); } } } //获取ajax对象 function creatRequest() { var request; if(window.XMLHttpRequest){ request = new XMLHttpRequest(); }else { request = new ActiveXObject('Microsoft,XMLHttp'); } return request; } function getDetails(itemName) { //request就是ajax对象 request = creatRequest(); //get方式 request.open("get","getDetails.php?LiName="+escape(itemName),true); //绑定事件处理函数 request.onreadystatechange = displayDetails; //这儿应该是不传给服务器数据的意思么?不太理解 request.send(null); } //监听器 function displayDetails() { if (request.readyState == 4) { if (request.status == 200) { detailDiv = document.getElementById("inf"); detailDiv.innerHTML = request.responseText; } } } </script>
实现点击li标签 请求一个新的数据在右边.
参考:http://www.cnblogs.com/duanhuajian/archive/2012/10/20/2731840.html
https://wenku.baidu.com/view/f6b7a03116fc700abb68fcc4.html
有点闷 可能一开始就是不在乎 不是么..
2017.5.5