Ajax向服务器请求对表单和表格进行操作

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

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>

 

posted @ 2016-09-13 16:24  超小级小萝莉  阅读(2004)  评论(0)  编辑  收藏  举报