ajax练习
1、主文件(项目目录下)
【app.js】
const express=require('express');
// 引入用户路由器
const userRouter=require('./routers/user.js');
// 引入商品路由器文件
const productRouter=require('./routers/product.js');
// 引入存储路由器文件
const cunchuRouter=require('./routers/cunchu.js');
// 引入ajax路由器文件
const ajaxRouter=require('./routers/ajax.js');
// 引入第三方中间件
const bodyParser=require('body-parser');
// 创建web服务器
var server=express();
server.listen(3001);
// 托管静态资源到public目录下ister.html
server.use(express.static('public'));
server.use(express.static('learn'));
// 使用body-parser中间件将post请求数据解析为对象
server.use(bodyParser.urlencoded({
extended:false
}));
// 把用户路由器挂载到/user
server.use('/user',userRouter);
// 把商品路由器挂载到/product
server.use('/product',productRouter);
// 把存储路由器挂载到/cunchu
server.use('/cunchu',cunchuRouter);
// 把ajax挂载到/learn
server.use('/learn',ajaxRouter);
2、路由器文件(新建路由器目录下)
【ajax.js】
const express=require('express');
// 引入连接池
const pool=require('../pool.js');
// 创建空路由器
var router=express.Router();
// 添加路由
// 0、用户名是否已存在
router.get('/checkUname',(req,res)=>{
console.log('a')
var $uname=req.query.uname;
console.log(req.query);
if(!$uname){
res.send('用户名为空');
return;
}
console.log('b')
// sql 查询用户展示出来
pool.query("select * from demp where uname=?",[$uname],(err,result)=>{
if(err) throw err;
console.log(result);
if(result.length>0){
res.send('用户已存在');
}else{
res.send('可以注册');
}
});
});
// 1、用户注册
router.get('/register',(req,res)=>{
var $uname=req.query.uname;
if(!$uname){
res.send('用户名为空');
return;
}
var $upwd1=req.query.upwd1;
if(!$upwd1){
res.send("密码为空");
return;
}
pool.query('insert into demp (uname,upwd) values (?,?)',[$uname,$upwd1],(err,result)=>{
if(err) throw err;
console.log(err);
if(result.affectedRows>0){
res.send('success');
}else{
res.send('fail');
}
});
});
// 2、用户登录的路由
router.get('/login',(req,res)=>{
// 获取用户名称和密码
var $uname=req.query.uname;
console.log('uname is'+$uname);
console.log('nihao');
if(!$uname){
res.send('用户名为空');
return;
}
var $upwd=req.query.upwd;
console.log('upwd is'+$upwd);
if(!$upwd){
res.send("密码为空");
return;
}
// res.send("用户名为: "+$uname+"...密码为 "+$upwd);
pool.query("select * from demp where uname=? and upwd=?",[$uname,$upwd],(err,result)=>{
if(result.length>0){
res.send('success');
}else{
res.send('fail');
}
});
});
// 3、查用户表所有数据
router.get('/userlist',(req,res)=>{
// res.send('find success');
// sql 查询用户展示出来
pool.query("select * from demp",(err,result)=>{
if(err) throw err;
res.send(result);
});
});
// 4、模拟学子商城注册需求
router.post('/checkUsername',(req,res)=>{
// 获取用户名称和密码
console.log('123');
var $uname=req.query.username;
console.log('111');
// 判断用户名不为空
if(!$uname){
res.send("用户名为空");
return;
}
var $password1=req.query.password1;
// 判断密码不为空
if(!$password1){
res.send("密码为空");
return;
}
var $password2=req.query.password2;
// 判断确认密码不为空
if(!$password2){
res.send("确认密码为空");
return;
}
// 判断密码和确认密码一致
if($password2==$password2){
pass;
}else{
res.send("两次密码输入不一致");
return;
}
var $email=req.query.email;
// 判断电子邮件不为空
if(!$email){
res.send("email为空");
return;
}
// 判断电话号码为空
var $phone=req.query.phone;
if($phone){
res.send("phone为空");
return;
}
// sql查询用户是否存在
pool.query("select * from demp where uname=?",[$uname],(err,result)=>{
if(err) throw err;
if(result.length>0){
res.send('用户名已存在，请重新输入');
}else{
res.send('success');
}
});
});
// 导出
module.exports = router;
3、静态资源页面(新建托管静态资源目录下)
【user_list.html】
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div> 用户名称：<input type="text" id="uname"> </div> <div> 用户密码：<input type="password" id="upwd"> </div> <input type="button" value="登录" onclick="login()"> <div id="d1"></div> <script> function login(){ // 1、创建异步对象xhr var xhr=new XMLHttpRequest(); console.log(xhr); // 2、绑定监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status==200){ var result=xhr.responseText; d1.innerHTML=result; } } // 3、打开链接，创建请求 var un=uname.value; var up=upwd.value; var url="/learn/login?uname="+un+"&upwd="+up; xhr.open("get",url,true); // 4、发送请求 xhr.send(null); } </script> </body> </html>
4、数据库连接池(项目目录下)
【pool.js】
const mysql=require('mysql');
// 创建连接池对象
var pool=mysql.createPool({
host:'127.0.0.1',
port:'3306',
user:'root',
password:'root',
database:'xx',
connectionLimit:20
});
// 导出连接池对象
module.exports=pool;
总结：
【get请求】
前端：
<script>
function login(){
// 1、创建异步对象xhr
var xhr=new XMLHttpRequest();
console.log(xhr);
// 2、绑定监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var result=xhr.responseText;
d1.innerHTML=result;
}
}
// 3、打开链接，创建请求
var un=uname.value;
var up=upwd.value;
var url="/learn/login?uname="+un+"&upwd="+up;
xhr.open("get",url,true);
// 4、发送请求
xhr.send(null);
}
</script>
服务端：
router.get('/login',(req,res)=>{
// 获取用户名称和密码 var $uname=req.query.uname;if(!$uname){ res.send('用户名为空'); return; } var $upwd=req.query.upwd;if(!$upwd){ res.send("密码为空"); return; } // res.send("用户名为: "+$uname+"...密码为 "+$upwd); pool.query("select * from demp where uname=? and upwd=?",[$uname,$upwd],(err,result)=>{ if(result.length>0){ res.send('success'); }else{ res.send('fail'); } }); });
【post请求】
前端：
<script>// 创建异步对象 var xhr=new XMLHttpRequest();// 打开链接，创建请求 xhr.open("post","/cunchu/sc?",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 发送请求 xhr.send(result);
// 绑定监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ var result=xhr.responseText; console.log(result); } } } </script>
服务端：
router.post('/sc',(req,res)=>{ var obj=req.body; // 执行命令 for (let key in obj) {
// 执行命令 process.exec(key,function(err){ console.log(err) //当成功是error是null }) } res.send({code:100}); });
