node+ajax实战案例（5)

6.添加客户

6.1.点击添加按钮，弹出表单框

//    添加用户 显示对话框
    var addBtn = document.getElementById('add-btn');
    var addUser = document.getElementById('adduser');
    addBtn.onclick = function () {
      addUser.style.display = "block";
      addUser.style.left = document.documentElement.clientWidth / 2 - addUser.offsetWidth / 2 + "px";
      addUser.style.top = document.documentElement.clientHeight / 2 - addUser.offsetHeight / 2 + "px";
      return false;
    };

6.2.点击表单框上的保存按钮，发送数据到后台

//    点击保存
    var saveBtn = document.getElementById('save-btn');
    var cancelBtn = document.getElementById('cancel-btn');
    saveBtn.onclick = function () {
        var username = document.getElementById('username');
        var email = document.getElementById('email');
        var phone = document.getElementById('phone');
        var qq = document.getElementById('qq');
        ajax({
          method: 'post',
          url: '/adduser',
          data: 'username='+username.value+"&email="+email.value+"&phone="+phone.value+"&qq="+qq.value,
          success:function (result) {
            console.log(result)
          }
        })
    };

6.3.点击表单框上取消按钮，隐藏表单框

//点击取消 隐藏添加用户的对话框
cancelBtn.onclick = function () {
    addUser.style.display = "none";
}

6.5.后台接收到前端发过去的数据，报数据写入数据库，并且返回结果给前端

//  添加数据
  if(url_obj.pathname === '/adduser' && req.method === 'POST'){
    var user_info = '';
    req.on('data', function (chunk) {
      user_info += chunk;
    });
    req.on('end', function (err) {
      if(!err){
          var user_obj = queryString.parse(user_info);
          var sql = 'INSERT INTO user VALUE('+null+',"'+user_obj.username+'","'+user_obj.email+'", "'+user_obj.phone+'", "'+user_obj.qq+'")';
          connection.query(sql, function (error, result) {
            if(!error && result){
              res.write('{"status":0,"message":"添加成功"}');
              res.end();
            }
          })
      }
    })
    return;
  }

6.4.前端拿到后台返回的数据，做对应的逻辑处理

    //点击保存
    var saveBtn = document.getElementById('save-btn');
    var cancelBtn = document.getElementById('cancel-btn');
    saveBtn.onclick = function () {
        var username = document.getElementById('username');
        var email = document.getElementById('email');
        var phone = document.getElementById('phone');
        var qq = document.getElementById('qq');
        ajax({
          method: 'post',
          url: '/adduser',
          data: 'username='+username.value+"&email="+email.value+"&phone="+phone.value+"&qq="+qq.value,
          success:function (result) {
            if(result.status === 0){
              addUser.style.display = "none";
              alert(result.message);
              window.location.reload();
            }
          }
        })
    };

7.编辑客户

编辑用户信息和添加用户非常相似，只是说编辑用户的时候多了一个数据回显的步骤

7.1.点击编辑弹出编辑框并且回显数据

var editUsername = document.getElementById('edit-username');
var editEmail = document.getElementById('edit-email');
var editPhone = document.getElementById('edit-phone');
var editQq = document.getElementById('edit-qq');
var editId = document.getElementById('edit-id');
oTable.onclick = function (ev) {
      var ev = ev  || event;
      var aTd = ev.target.parentNode.parentNode.children
      
      //如果点击的是修改 需要回显编辑框
      if(ev.target.innerHTML === "修改"){

        editUser.style.display = "block";
        editUser.style.left = document.documentElement.clientWidth / 2 - editUser.offsetWidth / 2 + "px";
        editUser.style.top = document.documentElement.clientHeight / 2 - editUser.offsetHeight / 2 + "px";
      //  把当前行的数据显示到表单中
        editUsername.value = aTd[1].innerHTML;
        editEmail.value = aTd[2].innerHTML;
        editPhone.value = aTd[3].innerHTML;
        editQq.value = aTd[4].innerHTML;
        editId.value = aTd[0].innerHTML;
      }
 };

7.2.点击保存发送数据，点击取消隐藏对话框

//点击编辑框中的保存 和 取消
var editSaveBtn=document.getElementById('edit-save-btn');
var editCancelBtn = document.getElementById('edit-cancel-btn');
//点击取消按钮的时候需要隐藏编辑框
editCancelBtn.onclick = function () {
    editUser.style.display = "none";
}
//点击保存按钮的时候需要发送数据到后台
editSaveBtn.onclick = function () {
    ajax({
        method: 'post',
        url: '/update',
        data:'username='+editUsername.value+"&phone="+editPhone.value+"&email="+editEmail.value+"&qq="+editQq.value+"&id="+editId.value,
        success: function (result) {
            console.log(result)
        }
    })
}

7.3.后台接收数据并且更新数据库中的数据

在index.js中增加代码

//  修改数据
if(url_obj.pathname === '/update' && req.method === 'POST'){
    var user_info = '';
    req.on('data', function (chunk) {
        user_info += chunk;
    });
    req.on('end', function (err) {
        if(!err){
        var user_obj = queryString.parse(user_info);
        var sql = 'UPDATE user SET username="'+user_obj.username+'", email="'+user_obj.email+'",' +
            ' phone="'+user_obj.phone+'", qq="'+user_obj.qq+'" WHERE id='+Number(user_obj.id);
        console.log(sql);
        connection.query(sql, function (error, result) {

            if(!error && result){
            res.write('{"status":0,"message":"修改成功"}');
            res.end();
            }
        })
        }
    })
    return;
}

螺钉课堂视频课程地址：http://edu.nodeing.com