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. jchdl - RTL实例 - MOS6502 CPU

    https://mp.weixin.qq.com/s/OguQKMU64GGdinCJjgyeKw   实现MOS6502 CPU,主要是实现状态机.   参考链接 https://github.co ...

  2. 数据分析 | 数据可视化图表,BI工具构建逻辑

    本文源码:GitHub·点这里 || GitEE·点这里 一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出 ...

  3. 初窥Ansible playbook

    Ansible是一个系列文章,我会尽量以通俗易懂.诙谐幽默的总结方式给大家呈现这些枯燥的知识点,让学习变的有趣一些. Ansible系列博文直达链接:Ansible入门系列 前言 在上一篇文章中说到A ...

  4. HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现

    对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...

  5. Java实现 LeetCode 791 自定义字符串排序(桶排序)

    791. 自定义字符串排序 字符串S和 T 只包含小写字符.在S中,所有字符只会出现一次. S 已经根据某种规则进行了排序.我们要根据S中的字符顺序对T进行排序.更具体地说,如果S中x在y之前出现,那 ...

  6. Java实现 LeetCode 316 去除重复字母

    316. 去除重复字母 给定一个仅包含小写字母的字符串,去除字符串中重复的字母,使得每个字母只出现一次.需保证返回结果的字典序最小(要求不能打乱其他字符的相对位置). 示例 1: 输入: " ...

  7. php开发环境和框架phalcon的搭建

    0x01 在ubuntu 12.04 上安装lnmp环境. 安装nginx  (Centos install nginx repo  wget http://www.atomicorp.com/ins ...

  8. WAMP3.1 安装php_redis.dll扩展并配置php.ini

    一. 下载对应版本的php_redis.dll 下载地址:http://windows.php.net/downloads/pecl/releases/redis 注:php7目录下有php7.dll ...

  9. Python惯用法

    目录 1. 不要使用可变类型作为参数的默认值 1. 不要使用可变类型作为参数的默认值 摘自<流畅的Python>8.4.1 class HauntedBus: ""&q ...

  10. @codechef - JADUGAR2@ Chef and Same Old Recurrence 2

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 定义 dp 序列: \[dp(1) = K\\ dp(n) = ...