第一次與后台數據庫鏈接，表示過程不簡單啊，似懂非懂，記錄下來（代碼簡化片段）
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>