发送post请求,鼠标移入显示内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
		</title>
		<style>
			#result {
				width: 300px;
				height: 100px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="result">
			
		</div>
	</body>
	<script type="text/javascript">
	    //获取元素对象
		const result = document.getElementById('result');
		//鼠标移入div显示内容
		result.addEventListener('mouseover',function(){
			//1.创建对象
			var xhr = new XMLHttpRequest();
			//初始化
			xhr.open('POST','http://127.0.0.1:8000/server');
			//设置请求头(预定义写法)
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			//设置请求同(自定义写法)但是会报错,一般是后端人员进行写好,这里前端写法,在server.js写入  ,使用all,不使用get/post   写入这段语句  response.setHeader('Access-Control-Allow-Headers','*');
			xhr.setRequestHeader('name','wsx');
			//发送
			xhr.send('111');
			//事件绑定
			xhr.onreadystatechange = function(){
				if(xhr.readyState === 4) {
					if(xhr.status >= 200 && xhr.status < 300){
						result.innerText = xhr.response;
					}
				}
			}
		})
	</script>
</html>

  

// npm i express  安装express
//引入 
const express = require('express')
//创建应用对象
const app =express();
//创建路由 get
app.get('/server',(request,response)=>{
	//设置响应头,设置允许跨域
	response.setHeader('Access-Control-Allow-Origin','*');
	//设置响应体
	response.send('Hello');
});
//创建路由 post   all 接受全部参数
app.all('/server',(request,response)=>{
	//设置响应头,设置允许跨域
	response.setHeader('Access-Control-Allow-Origin','*');
	//响应头
	response.setHeader('Access-Control-Allow-Headers','*');
	//设置响应体
	response.send('Hello 111');
});

//创建路由 post   all 接受全部参数
app.get('/json-server',(request,response)=>{
	//设置响应头,设置允许跨域
	response.setHeader('Access-Control-Allow-Origin','*');
	
	//响应一条数据
	const data = {
		name : 'wsx'
	};
	//对对象进行字符串转换
	var str = JSON.stringify(data);
	//设置响应体
	response.send(str);
});

//启动端口  //终端输入运行   :   node express基本使用.js   http://127.0.0.1:8000/   按ctrl+c释放端口
app.listen(8000,()=>{
	console.log('启动端口')
})

  

 

posted on 2023-02-07 23:52  爱前端的小魏  阅读(18)  评论(0编辑  收藏  举报

导航