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 ...
随机推荐
- IC-二进制, 自然数, 有符号数
https://mp.weixin.qq.com/s/9rGs9yN-OvLvEclnDZr87Q 零. 概念和结论 1. 数:概念名,指代物体的多少,即物体的量的概念: 2. 值:概念属性,数的 ...
- Java实现 蓝桥杯 算法提高 最大乘积
算法提高 最大乘积 时间限制:1.0s 内存限制:512.0MB 提交此题 问题描述 对于n个数,从中取出m个数,如何取使得这m个数的乘积最大呢? 输入格式 第一行一个数表示数据组数 每组输入数据共2 ...
- springboot实现定时任务,异步操作,统一结果返回,全局异常处理,拦截器及事务处理
本文是作者原创,版权归作者所有.若要转载,请注明出处. 本文都是springboot的常用和实用功能,话不多说开始吧 定时任务 1.启动类开启注解 @EnableScheduling //开启基于注解 ...
- iOS -实现imageView中的button响应点击事件的方法
<pre name="code" class="cpp" style="font-size: 13px;">/** imagev ...
- 一个基于Consul的.NET Leader选举类库
前段时间有传言说Consul将不能在我国继续使用,后被查明是因法律问题Vault企业版产品不能在国内销售.Valut和Consul都是HashiCorp公司的产品,并且都推出了开源版本,继续使用开源版 ...
- 给女朋友讲解什么是Git
前言 在周六发现了Linus去Google演讲的一个视频,当时还发了一条朋友圈: 有兴趣的同学也可以去看看,一点儿也不无聊,在线看Linus大佬怼人 https://www.bilibili.com/ ...
- SpringCloud之Security
Spring Security是Spring提供的一个安全框架,提供认证和授权功能,最主要的是它提供了简单的使用方式,同时又有很高的灵活性,简单,灵活,强大. 我个人博客系统采用的权限框架就是Spri ...
- TB6612FNG电机驱动模块
TB6612FNG电机驱动模块 模块原理图 模块的使用 TB6612是双驱动,也就是可以驱动两个电机 下面分别是控制两个电机的IO口 STBY口接单片机的IO口清零电机全部停止, 置1通过AIN1 A ...
- Accord.NET重启4.0 开发
Accord.NET Framework是在AForge.NET基础上封装和进一步开发来的.功能也很强大,因为AForge.NET更注重与一些底层和广度,而Accord.NET Framework更注 ...
- filebeat v6.3 多行合并的步骤 多个表达式同时匹配
配置文件位于/etc/filebeat/filebeat.yml,就是filebeat的主配置文件打开文件filebeat.yml,搜索multiline:,默认是注释的,常用的有如下三个配置: mu ...