<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>登录成功</h1> <input type="text"/> <input type="text"/> <button>查询</button> <div> <table cellspacing="0" cellpadding="10"> <tr><th>id</th><th>Name</th><th>Password</th><th>Address</th></tr> </table> </div> <script> function queryAll(){ var xhr; var mytable=document.getElementById("mytable"); var usernameStr=document.getElementById("username").value; var addressStr=document.getElementById("address").value; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft","XMLHTTP") } // xhr.open("get","queryAll.do？username"+usernameStr,true);//只有get方法才可以把参数加在这里 xhr.open("post","queryAll.do",true); xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //content-type只有在为post方法的时候才配置 xhr.onreadystatechange=function(){ mytable.innerHTML="<tr><th>id</th><th>Name</th><th>Password</th><th>Address</th></tr>"; //每次刷新html数据的时候，就先会把table清空，然后再添加数据 if(xhr.readyState==4&&xhr.status==200){ // console.log(xhr.responseText); var datalist=JSON.parse(xhr.responseText);//用json将服务器返回的字符串转换成了数组对象 for(var i=0;i<datalist.length;i++){ console.log(datalist[i].id);//通过属性获取值，datalist[i]是属性 console.log(datalist[i].U_name); console.log(datalist[i].U_pwd); console.log(datalist[i].U_address); mytable.innerHTML=mytable.innerHTML+"<tr><td>"+datalist[i].id+"</td><td>" +datalist[i].U_name+"</td><td>" +datalist[i].U_pwd+"</td><td>" +datalist[i].U_address+"</td></tr>"; } } }; //xhr.send(null);//get方法下使用这个发送Ajax请求 xhr.send("username="+usernameStr)//post方法将发送的参数写在这里 } </script> </body> </html>