第一次与后台数据库链接，表示过程不简单啊，似懂非懂，记录下来（代码简化片段）
1向服务器请求读取用户数据并在网页上打印表格
//向服务器请求读取用户数据并在网页上打印表格
/** * [getData 获取所有用户数据] * @return {[type]} [description] */ user.getUsersData=function(callback){ var xhr = new XMLHttpRequest(); var url="..."; //后台地址 xhr.open("GET", url); //读取 xhr.setRequestHeader("content-type", "application/json"); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { callback(xhr.responseText); //回调函数 } } xhr.send(null); } user.loadData=function(){ //user.loadData相当于一个刷新功能，在别处可调用局部刷新 user.getUsersData(function(res){ var list=JSON.parse(res).data; //JSON渲染是必须的,转换成对象 var L=list.length; var html="<table>"; //原生手动创建表格，在把服务器上传来的数据放进表格 for(var i=0;i<=L-1;i++){ html=html+"<tr dataid='"+list[i].id+"'> <td><input type='checkbox' class='checkinfo'> </td><td>"+list[i].username+"</td> <td>"+list[i].fullname+"</td></tr>"; //这里的id对应数据库里的id } html=html+"</table>"; document.querySelector(".scroll").innerHTML=html; //把表格插进网页 }); } user.loadData();
2向表格中添加信息
//向表格中添加信息 /** * [addUsersData 添加用户信息] * @param {[json]} data [用户数据] * @param {function} fn [回调] */ user.addUsersData=function(data,fn){ var xhr = new XMLHttpRequest(); var url="..."; xhr.open("POST", url); //发送 xhr.setRequestHeader("content-type", "application/json"); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { var str=xhr.responseText; var obj=JSON.parse(str); fn&&fn(obj); } } data=JSON.stringify(data); xhr.send(data); } var add=document.getElementById("add"); add.onclick=function(){ var data={ //将数据存起来发送 username:document.getElementById("count").value, fullname:document.getElementById("name").value, }; user.addUsersData(data,function(res){ user.loadData(); //局部刷新 });
3修改表格中的信息
//修改表格中的信息 /** * [EditUsersData 编辑用户] * @param {[JSON]} data [提交的数据] * @param {Function} fn [回调] */ user.EditUsersData=function(data,fn){ var xhr = new XMLHttpRequest(); var url="..."; xhr.open("PUT", url); xhr.setRequestHeader("content-type", "application/json"); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { var str=xhr.responseText; var obj=JSON.parse(str); fn&&fn(obj); } } data=JSON.stringify(data); xhr.send(data); } //修改信息 信息先要显示在表单中 var checkbox = document.querySelector("input[type='checkbox']:checked"); var tr=checkbox.parentNode.parentNode; document.getElementById("count").value=tr.childNodes[1].innerText; document.getElementById("name").value=tr.childNodes[2].innerText; var edit=document.getElementById("edit"); edit.onclick = function() { var checkbox = document.querySelector("input[type='checkbox']:checked"); var tr=checkbox.parentNode.parentNode; var id=tr.getAttribute("dataid"); //这是添加表格时创建的id var data={ id:id, username:document.getElementById("count").value, fullname:document.getElementById("name").value, }; user.EditUsersData(data,function(){ user.loadData(); //局部刷新 }); }
以下是html简写
<body> <form> <ul>账号：<input type="text" id="count"></ul> <ul>姓名：<input type="text" id="name"></ul> <input type="button" id="add"> <input type="button" id="edit"> </form> <div class="scroll"> </div> </body>