第一次与后台数据库链接，表示过程不简单啊，似懂非懂，记录下来（代码简化片段）

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="
     
      ";             //原生手动创建表格，在把服务器上传来的数据放进表格        for(var i=0;i<=L-1;i++){            html=html+"
        \            
\            
"; //这里的id对应数据库里的id        }        html=html+"
      
       
        
\            
        
"+list[i].username+"
        
"+list[i].fullname+"
       
      
     
";        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.οnclick=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简写

    
     
        
      
       账号：
       
      
        
      
       姓名：