发送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('启动端口') })