ajax之post实践

最新推荐文章于 2022-01-19 13:47:40 发布

高鹏飞白羊

最新推荐文章于 2022-01-19 13:47:40 发布

阅读量128

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43755916/article/details/100774027

版权

web前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

服务器文件

//服务器端的文件
const express=require('express');
//psot
const bodyParser=require('body-parser');
const demoRouter=require('./routers/demo.js');
const ajaxRouter=require('./routers/ajax.js');
var server=express();
server.listen(8888);
//托管静态资源到public
server.use(express.static('./public'));

//使用路由器管理路由
//把用户路由器挂载到/user,访问形式/user/detail,所以HTML中要改
server.use(bodyParser.urlencoded({
	extended:false
}));
server.use('/demo',demoRouter);
server.use('/ajax',ajaxRouter);

路由器文件

const express=require("express");
const pool=require("../pool.js");
var router=express.Router();
router.get("/ajaxHappy",(req,res)=>{
	res.send("这个输入框必填");
});
router.get("/login",(req,res)=>{
	var reqObj=req.query;
	var uname=reqObj.uname;
	var upwd=reqObj.upwd;
	if(!uname){
		res.send({code:300,msg:"uname require"});
		return;
	}
	if(!upwd){
		res.send({code:300,msg:"upwd require"});
		return;
	}
	//res.send({code:200,msg:"success"});
	//查询数据库
	pool.query(`select * from reg where username=? and password=?`,[uname,upwd],(err,result)=>{
		if(err){throw err;}
		var i=result.length;
		if(i>0){
			res.send("登录成功");
		}else{
			res.send("用户名密码不正确");
		}
	});
});

//注册
router.post("/reg",(req,res)=>{
	var reqObj=req.body;
	var username=reqObj.username;
	var password=reqObj.password;
	var emile=reqObj.emile;
	var phone=reqObj.phone;
	if(!username){
		res.send("username required!");
		return;
	}
	if(!password){
		res.send("password required!");
		return;
	}
	if(!emile){
		res.send("emile required!");
		return;
	}
	if(!phone){
		res.send("phone required!");
		return;
	}
	pool.query(`insert into reg set ?`,[reqObj],(err,result)=>{
		if(err) throw err;
		if(result.affectedRows>0){
			res.send("注册成功");
		}else{
			res.send("注册失败");
		}
	})
});
router.get("/checkuname",(req,res)=>{
	var reqObj=req.query;
	var uname=reqObj.uname;
	var upwd=reqObj.upwd;
	if(!uname){
		res.send("用户名必填");
		return;
	}
	if(!upwd){
		res.send({code:300,msg:"upwd require"});
		return;
	}
	pool.query(`select * from reg where username=?`,[uname],(err,result)=>{
		if(err){throw err;}
		var i=result.length;
		if(i>0){
			res.send("用户存在");
		}else{
			res.send("用户不存在");
		}
	});
});


module.exports=router;

HTML文件

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	</head>
	<body>
		<div>
		用户名：<input type="text" id="username" onblur="reg()">
		</div>
		<div>
		密码：<input type="password" id="password" onblur="reg()">
		</div>
		<div>
		邮箱：<input type="email" id="emile" onblur="reg()">
		</div>
		<div>
		电话：<input type="tel" id="phone" onblur="reg()">
		</div>
		<input type="button" value="提交" onclick="reg()">
		<div id="d1"></div>
		<script>
			function reg(){
				var xhr=new XMLHttpRequest();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&xhr.status==200){
						var result=xhr.responseText;
						console.log(result);
						d1.innerHTML=result;
					}
				}
				xhr.open('post','/ajax/reg',true);
				//修改消息头,由于默认请求时text/plain，无法传递URL中的符号
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				
				var formdata="username="+username.value+"&password="+password.value+"&emile="+emile.value+"&phone="+phone.value;
				console.log(formdata);
				xhr.send(formdata);
			}
		</script>	
	</body>
</html>