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

node+ajax实战案例(5)的更多相关文章

  1. node+ajax实战案例(2)

    2.静态资源渲染 2.1.创建http服务器 var http = require('http'); var url = require('url'); var app = http.createSe ...

  2. node+ajax实战案例(6)

    8.删除客户 8.1.发送id到后台 删除用户信息比较简单,只需要把对应行的id发送到后台就可以了 oTable.onclick = function (ev) { var ev = ev || ev ...

  3. node+ajax实战案例(4)

    4.用户登录实现 4.1.用户登录实现思路 1 用户输入登录信息,点击登录的时候把用户登录的这些信息收集起来,然后组装数据通过ajax方式发送到后台 2 后台接到用户输入的登录信息,把这些信息拿去和数 ...

  4. node+ajax实战案例(3)

    3.用户注册实现 3.1.注册用户功能的实现逻辑 1 用户在表单上输入注册信息 2 点击注册后,收集用户在表单上输入的注册信息并且发送给后台 3 后台接收用户发送过来的注册信息 4 后台需要处理数据并 ...

  5. node+ajax实战案例(1)

    1.mysql入门 1.1.数据库相关概念 1.1.1.什么是数据? 描述事物的符号记录称为数据,描述事物的符号可以是数字.文字.声音.图片.视频等,有多种表现形式,都可以经过数字化后存入计算机 1. ...

  6. 《Node.js实战(双色)》作者之一——吴中骅访谈录

  7. 如何从40亿整数中找到不存在的一个 webservice Asp.Net Core 轻松学-10分钟使用EFCore连接MSSQL数据库 WPF实战案例-打印 RabbitMQ与.net core(五) topic类型 与 headers类型 的Exchange

    如何从40亿整数中找到不存在的一个 前言 给定一个最多包含40亿个随机排列的32位的顺序整数的顺序文件,找出一个不在文件中的32位整数.(在文件中至少确实一个这样的数-为什么?).在具有足够内存的情况 ...

  8. Flume实战案例运维篇

    Flume实战案例运维篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Flume概述 1>.什么是Flume Flume是一个分布式.可靠.高可用的海量日志聚合系统,支 ...

  9. 使用Zabbix监控Nginx服务实战案例

    使用Zabbix监控Nginx服务实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  一.编译安装nginx步骤详解并开启状态页 博主推荐阅读: https://www.cn ...

随机推荐

  1. Java实现 LeetCode 769 最多能完成排序的块(单向遍历)

    769. 最多能完成排序的块 数组arr是[0, 1, -, arr.length - 1]的一种排列,我们将这个数组分割成几个"块",并将这些块分别进行排序.之后再连接起来,使得 ...

  2. Java实现 蓝桥杯 算法提高 成绩排序

    试题 算法提高 成绩排序 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 给出n个学生的成绩,将这些学生按成绩排序, 排序规则,优先考虑数学成绩,高的在前:数学相同,英语高的在前:数 ...

  3. 第九届蓝桥杯JavaA组省赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.分数 题目描述 1/1 + 1/2 + 1/4 + 1/8 + 1/16 + - 每项是前一项的一半,如果一共有20项, 求这个和是多 ...

  4. 关于virgo-tomcat-server-3.6.0.RELEASE服务的启动

    1.先查看程序是否启动,如果已经启动可以执行第3步的操作进行关闭. [user01@ ~]$ # ps -ef|grep java //查看virgo-tomcat-server的java进程是否存在 ...

  5. JAVA第三次blog总结

    JAVA第三次blog总结 0.前言 这是我们在博客园上第三次写博客,也是本学期最后一次的JAVA学习大总结.现在我们的JAVA已经接近尾声了,对于编程思想和方法的改变依旧是难点,但是经过这一段时间的 ...

  6. 【Flutter实战】移动技术发展史

    老孟导读:大家好,这是[Flutter实战]系列文章的第一篇,这并不是一篇Flutter技术文章,而是介绍智能手机操作系统.跨平台技术的演进以及我对各种跨平台技术看法的文章. 智能手机操作系统 塞班( ...

  7. 程序员实用JDK小工具归纳,工作用得到

    在JDK的安用装目录bin下,有一些有非常实用的小工具,可用于分析JVM初始配置.内存溢出异常等问题,我们接下来将对些常用的工具进行一些说明. JDK小工具简介 在JDK的bin目录下面有一些小工具, ...

  8. kibana的Dev Tool中如何对es进行增删改查

    kinaba Dev Tool中对es(elasticSearch)进行增删改查 一.查询操作 查询语句基本语法 以下语句类似于mysql的: select * from  xxx.yyy.topic ...

  9. python数据类型转换&&格式化输出

    ①python的数据类型包含:数字.字符串.列表.元组.字典.集合这六种基本数据类型.不同数据类型的数据可以进行类型的转换. 使用input让用户输入的数据默认为字符串类型: name = input ...

  10. 构建自己的jar包上传至Mvaen中央仓库和版本更新

    构建自己的jar包上传至Mvaen中央仓库和版本更新 一直羡慕别人制造轮子,开源项目,供别人使用:我也想这样,可以自己才疏学浅,本次就将自己写小工具上传到Maven的中央仓库. 一步一步详细教程演示如 ...