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
node+ajax实战案例(5)的更多相关文章
- node+ajax实战案例(2)
2.静态资源渲染 2.1.创建http服务器 var http = require('http'); var url = require('url'); var app = http.createSe ...
- node+ajax实战案例(6)
8.删除客户 8.1.发送id到后台 删除用户信息比较简单,只需要把对应行的id发送到后台就可以了 oTable.onclick = function (ev) { var ev = ev || ev ...
- node+ajax实战案例(4)
4.用户登录实现 4.1.用户登录实现思路 1 用户输入登录信息,点击登录的时候把用户登录的这些信息收集起来,然后组装数据通过ajax方式发送到后台 2 后台接到用户输入的登录信息,把这些信息拿去和数 ...
- node+ajax实战案例(3)
3.用户注册实现 3.1.注册用户功能的实现逻辑 1 用户在表单上输入注册信息 2 点击注册后,收集用户在表单上输入的注册信息并且发送给后台 3 后台接收用户发送过来的注册信息 4 后台需要处理数据并 ...
- node+ajax实战案例(1)
1.mysql入门 1.1.数据库相关概念 1.1.1.什么是数据? 描述事物的符号记录称为数据,描述事物的符号可以是数字.文字.声音.图片.视频等,有多种表现形式,都可以经过数字化后存入计算机 1. ...
- 《Node.js实战(双色)》作者之一——吴中骅访谈录
- 如何从40亿整数中找到不存在的一个 webservice Asp.Net Core 轻松学-10分钟使用EFCore连接MSSQL数据库 WPF实战案例-打印 RabbitMQ与.net core(五) topic类型 与 headers类型 的Exchange
如何从40亿整数中找到不存在的一个 前言 给定一个最多包含40亿个随机排列的32位的顺序整数的顺序文件,找出一个不在文件中的32位整数.(在文件中至少确实一个这样的数-为什么?).在具有足够内存的情况 ...
- Flume实战案例运维篇
Flume实战案例运维篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Flume概述 1>.什么是Flume Flume是一个分布式.可靠.高可用的海量日志聚合系统,支 ...
- 使用Zabbix监控Nginx服务实战案例
使用Zabbix监控Nginx服务实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.编译安装nginx步骤详解并开启状态页 博主推荐阅读: https://www.cn ...
随机推荐
- jchdl - RTL实例 - MOS6502 CPU
https://mp.weixin.qq.com/s/OguQKMU64GGdinCJjgyeKw 实现MOS6502 CPU,主要是实现状态机. 参考链接 https://github.co ...
- 数据分析 | 数据可视化图表,BI工具构建逻辑
本文源码:GitHub·点这里 || GitEE·点这里 一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出 ...
- 初窥Ansible playbook
Ansible是一个系列文章,我会尽量以通俗易懂.诙谐幽默的总结方式给大家呈现这些枯燥的知识点,让学习变的有趣一些. Ansible系列博文直达链接:Ansible入门系列 前言 在上一篇文章中说到A ...
- HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现
对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...
- Java实现 LeetCode 791 自定义字符串排序(桶排序)
791. 自定义字符串排序 字符串S和 T 只包含小写字符.在S中,所有字符只会出现一次. S 已经根据某种规则进行了排序.我们要根据S中的字符顺序对T进行排序.更具体地说,如果S中x在y之前出现,那 ...
- Java实现 LeetCode 316 去除重复字母
316. 去除重复字母 给定一个仅包含小写字母的字符串,去除字符串中重复的字母,使得每个字母只出现一次.需保证返回结果的字典序最小(要求不能打乱其他字符的相对位置). 示例 1: 输入: " ...
- php开发环境和框架phalcon的搭建
0x01 在ubuntu 12.04 上安装lnmp环境. 安装nginx (Centos install nginx repo wget http://www.atomicorp.com/ins ...
- WAMP3.1 安装php_redis.dll扩展并配置php.ini
一. 下载对应版本的php_redis.dll 下载地址:http://windows.php.net/downloads/pecl/releases/redis 注:php7目录下有php7.dll ...
- Python惯用法
目录 1. 不要使用可变类型作为参数的默认值 1. 不要使用可变类型作为参数的默认值 摘自<流畅的Python>8.4.1 class HauntedBus: ""&q ...
- @codechef - JADUGAR2@ Chef and Same Old Recurrence 2
目录 @description@ @solution@ @accepted code@ @details@ @description@ 定义 dp 序列: \[dp(1) = K\\ dp(n) = ...