node + ajax real case (5)

6. Add client

6.1. Click the Add button to bring up the form box

//    添加用户 显示对话框
    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. Save button on the form box, the data is sent to the background

//    点击保存
    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. Cancel button, hidden form box on the form, click the box

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

6.5. Background to the front end to the past receiving data, packet data to a database, and return the results to the front end

//  添加数据
  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. Distal to get back return data, corresponding to the processing logic do

    //点击保存
    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. Edit Customer

Add users and edit user information is very similar, except to say when editing a user's data back to a more significant step

7.1. Click on Edit to edit the pop-up box and echo data

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. Click Save to send the data, click on the Unhide dialog box

//点击编辑框中的保存 和 取消
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. Background receive data and update data in the database

Increase in code 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;
}

Screw classroom video lessons Address: http://edu.nodeing.com