ajax输入一个值带出符合项实践

最新推荐文章于 2024-09-21 13:22:05 发布

高鹏飞白羊

最新推荐文章于 2024-09-21 13:22:05 发布

阅读量97

点赞数 1

分类专栏： web前端

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

版权

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("用户不存在");
		}
	});
});

//接受post传递过来的unname,在数据库中查询，返回响应
router.post("/postuser",(req,res)=>{
	var reqObj=req.body;
	var username=reqObj.username;
	pool.query(`select username from reg where username like ???`,["%",username,"%"],(err,result)=>{
		if(result.length>0){
			res.send(result);
		}
	});
	
});

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" onfocus="check()">
		<div id="like"></div>
		</div>
		<div>
		密码：<input type="password" id="password">
		</div>
		<div>
		邮箱：<input type="email" id="emile">
		</div>
		<div>
		电话：<input type="tel" id="phone">
		</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);
			}
			//模糊搜索展示出符合条件的名称
			function check(){
				var xhr=new XMLHttpRequest();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&xhr.status==200){
						var result=xhr.responseText;
						console.log(result);
						like.innerHTML=result;
					}
				}
				xhr.open('post','/ajax/checkuname',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>