ajax练习
Posted Alieen617
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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}); });
以上是关于ajax练习的主要内容，如果未能解决你的问题，请参考以下文章
spring练习，在Eclipse搭建的Spring开发环境中，使用set注入方式，实现对象的依赖关系，通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段
Python练习册 第 0013 题： 用 Python 写一个爬图片的程序，爬 这个链接里的日本妹子图片 :-)，(http://tieba.baidu.com/p/2166231880)(代码片段