AJAX方法get/delete,post/put

其他 2020-04-18 11:32:06 阅读次数: 0

在这里插入图片描述
ajax/01_ajax.html

	<body>
		<button οnclick="fn()">连接服务器</button>
		<script>
			function fn(){
				//1.创建异步对象 
				var xhr=new XMLHttpRequest();
				console.log(xhr);
				//4.创建监听,接收响应
				xhr.onreadystatechange=function(){
					console.log(xhr.readyState);
					if(xhr.readyState==4 && xhr.status==200){
						var result=xhr.responseText;
						console.log(result);
						alert(result);
					}
				}
				//2.打开连接,创建请求
				xhr.open("get","/ajax/test",true);
				//3.发送请求
				xhr.send();
				
			}
		</script>
	</body>

ajax/02_http_get.html

<body>
		<input type="text" id="uname"><br>
		<input type="text" id="upwd"><br>
		<button οnclick="login()">登录</button>
		<script>
			function login(){
				//1.创建xhr异步对象
				var xhr=new XMLHttpRequest();
				//4.创建监听,接收响应
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var result=xhr.responseText;
						if(result==1){
							alert("登录成功");
						}else if(result==0){
							alert("用户名或密码错误");
						}else{
							alert("未接收到用户名或密码");
						}
					}
				}
				//2.打开连接,创建请求
				xhr.open("get","/ajax/http_login?uname="+uname.value+"&upwd="+upwd.value,true);
				//3.发送请求
				xhr.send();
			}
		</script>
	</body>

ajax/03_http_get.html

<body>
		<input type="text" id="uname"><br>
		<input type="text" id="upwd"><br>
		<div id="msg"></div>
		<button οnclick="login()">登录</button>
		<script>
			function login(){
				//获取用户数据的数据
				var $uname=uname.value;
				var $upwd=upwd.value;
				//1.获取xhr异步对象
				var xhr=new XMLHttpRequest();
				//4.创建监听,接收响应
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var result=xhr.responseText;
						if(result==1){
							msg.innerHTML="登录成功";
						}else if(result==0){
							msg.innerHTML="用户名或密码错误";
						}else{
							msg.innerHTML=result;
						}
					}
				}
				//2.打开连接,创建请求
				xhr.open("get","/ajax/login/"+$uname+"&"+$upwd,true);
				//3.发送请求
				xhr.send();
			}
		</script>
	</body>

restful的get方法(同delete)

后台
router.get("/login/:uname&:upwd",function(req,res){
	//获取参数
	var $uname=req.params.uname;
	var $upwd=req.params.upwd;
});
前台
xhr.open("get","/ajax/login/"+$uname+"&"+$upwd,true);
使用restful的get或者delete
不能在后台做非空验证
必须在前台做非空验证

ajax/04_restful_get.html

<body>
		<input type="text" id="uname"><br>
		<input type="text" id="upwd"><br>
		<div id="msg"></div>
		<button οnclick="login()">登录</button>
		<script>
			function login(){
				var $uname=uname.value;
				if(!$uname){
					msg.innerHTML="用户名为空";
					return;
				}
				var $upwd=upwd.value;
				if(!$upwd){
					msg.innerHTML="密码为空";
					return;
				}
				//1.获取xhr异步对象
				var xhr=new XMLHttpRequest();
				//4.创建监听,接收响应
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var result=xhr.responseText;
						if(result==1){
							msg.innerHTML="登录成功";
						}else if(result==0){
							msg.innerHTML="用户名或密码错误";
						}else{
							msg.innerHTML="未得到用户名或密码";
						}
					}
				}
				//2.打开连接,创建请求
				xhr.open("get","/ajax/v1/login/"+$uname+"&"+$upwd,true);
				//3.发送请求
				xhr.send();
			}
		</script>
	</body>

post/put

http原生和restful的post一模一样
//3.发送请求
//设置请求头信息,让请求可以传递所有字符
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
//创建请求主体
var formdata="uname="+$uname+"&upwd="+$upwd;
//发送请求,带着请求主体发送
xhr.send(formdata);
注意:setRequestHeader这个方法,必须在open和send之间

ajax/05_post.html

<body>
		<input type="text" id="uname"><br>
		<input type="text" id="upwd"><br>
		<div id="msg"></div>
		<button οnclick="login()">登录</button>
		<script>
			function login(){
				//获取用户输入的信息
				var $uname=uname.value;
				var $upwd=upwd.value;
				//1.创建xhr异步对象
				var xhr=new XMLHttpRequest();
				//4.创建监听,接收响应
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var result=xhr.responseText;
						msg.innerHTML=result;
					}
				}
				//2.打开连接,创建请求  
				xhr.open("post","/ajax/login_post",true);
				//3.发送请求
				//设置请求头
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				var formdata=`uname=${$uname}&upwd=${$upwd}`;
				xhr.send(formdata);
			}
		</script>
	</body>

ajax/06_getlist.html

	<body οnlοad="getList()">
		<div id="msg"></div>
		<script>
			function getList(){
				//1.获取xhr对象
				var xhr=new XMLHttpRequest();
				//4.创建监听,获取响应
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var result=xhr.responseText;
						//json解析
						console.log("json~~~"+result);
						var arr=JSON.parse(result);
						console.log("arr~~~"+arr);
						var strHTML="";//结构字符串
						//第一部分表头
						strHTML+=`
							<table border="1px">
                <tr>
								 <th>用户姓名</th>
								 <th>用户邮箱</th>
								 <th>联系方式</th>
								 <th>真实姓名</th>
								 <th>性别</th>
								 <th>操作</th>
								</tr>
							  
						`;
						//第二部分,表主体 
						for(var i=0;i<arr.length;i++){
							var gender="女";
							if(arr[i].gender==1){
								gender="男";
							}else{
								gender="女";
							}
							strHTML+=`
								<tr>
								  <td>${arr[i].uname}</td>
								  <td>${arr[i].email}</td>
								  <td>${arr[i].phone}</td>
								  <td>${arr[i].user_name}</td>
								  <td>${gender}</td>
								  <td>
										<a href="#">删除</a>
										<a href="#">修改</a>
									</td>
								</tr>
							`;
						}
						//第三部分,表格结尾
						strHTML+="</table>";
						msg.innerHTML=strHTML;
						
					}
				}
				//2.创建请求,打开连接
				xhr.open("get","/ajax/getlist",true);
				//3.发送请求
				xhr.send();
			}
		</script>
	</body>

ajax/07_getXML.html

<body οnlοad="getXML()">
		<div id="msg"></div>
		<script>
			function getXML(){
				//1.创建xhr对象
				var xhr=new XMLHttpRequest();
				//4.接收响应
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var result=xhr.responseXML;
//						var names=result.getElementsByTagName("name");
//						console.log(names[1].innerHTML);
						//result是xml对象  
						var list=result.getElementsByTagName("stulist");
						var stus=list[0].getElementsByTagName("stu");
						var names=stus[1].getElementsByTagName("name");
						console.log(names[0].innerHTML);
//						msg.innerHTML=typeof(result);
					}
				}
				//2.创建请求
				xhr.open("get","stu.xml",true);
				//3.发送请求
				xhr.send();
			}
		</script>
	</body>

ajax/stu.xml

<?xml version="1.0" encoding="utf-8"?>
<stulist>
	<stu>
		<name>lilei</name>
		<age>24</age>
		<gender>男</gender>
	</stu>
	<stu>
		<name>hanmeimei</name>
		<age>23</age>
		<gender>女</gender>
	</stu>
	<stu>
		<name>lucy</name>
		<age>23</age>
		<gender>女</gender>
	</stu>
</stulist>

routes/ajaxdemo.js

const express=require('express');
//引入连接池模块
const pool=require('../pool.js');
//创建路由器对象 
let router=express.Router();
//添加路由
//1.ajax测试接口 
router.get("/test",function(req,res){
	console.log("我的第一个ajax接口");
	res.send("我的第一个ajax接口");
});
//2.http原生get做登录
router.get("/http_login",(req,res)=>{
	//1.接收参数
	var $uname=req.query.uname;
	var $upwd=req.query.upwd;
	//2.非空验证
	if(!$uname){
		res.send("-1");
		return;//一个接口不能有两个send,所以用return
	}
	if(!$upwd){
		res.send("-2");
		return;
	}
	//查询数据库
	var sql="select * from xz_user where uname=? and upwd=?";
	pool.query(sql,[$uname,$upwd],(err,result)=>{
		if(err) throw err;
		if(result.length>0){
			res.send("1");
		}else{
			res.send("0");
		}
	});
});
//3.restful的get登录
//http://127.0.0.1:8080/ajax/login/abc&123
router.get("/v1/login/:uname&:upwd",function(req,res){
	//获取参数
	var $uname=req.params.uname;
	var $upwd=req.params.upwd;

	var sql="select * from xz_user where uname=? and upwd=?";
	pool.query(sql,[$uname,$upwd],function(err,result){
		if(err) throw err;
		if(result.length>0){
			res.send("1");
		}else{
			res.send("0");
		}
	});
});
//4.post登录
router.post("/login_post",(req,res)=>{
	var $uname=req.body.uname;
	var $upwd=req.body.upwd;
	console.log($uname+"~~~"+$upwd);
	var sql="select * from xz_user where uname=? and upwd=?";
	pool.query(sql,[$uname,$upwd],(err,result)=>{
		if(err) throw err;
		if(result.length>0){
			res.send("1");
		}else{
			res.send("0");
		}
	});
});
//5.查询所有用户 get不需要参数,原生和restfult一样
router.get("/getlist",(req,res)=>{
	var sql="select * from xz_user";
	pool.query(sql,(err,result)=>{
		if(err) throw err;
		res.send(result);
	});
});
//导出路由器
module.exports=router;

app.js

const express=require('express');
//引入路由器
const userRouter=require('./routes/user.js');
const ajaxRouter=require('./routes/ajaxdemo.js');
//引入body-parser中间件模块
const bodyParser=require('body-parser');
let app=express();
app.listen(8080);
//托管静态资源到public目录
app.use( express.static('./public') );
app.use( express.static('./ajax') );
//应用body-parser中间件
app.use( bodyParser.urlencoded({
  extended:false
}) );
//应用路由器
// /user/reg
app.use( '/user',userRouter );
app.use( '/ajax',ajaxRouter );

pool.js

const mysql=require('mysql');
//创建连接池对象
let pool=mysql.createPool({
  host:'127.0.0.1',
  port:'3306',
  user:'root',
  password:'',
  database:'xz',
  connectionLimit:15
});
//导出连接池对象
module.exports=pool;
CodeFarmer___
发布了54 篇原创文章 · 获赞 13 · 访问量 7746
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_44317018/article/details/103378300
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022