fatch 发送 AJAX请求
- 创建 server.js 文件
//1.引入express const express = require('express'); //2.创建应用对象 const app = express(); //3.创建路由规则 //requset是对请求报文的封装 //response是对相应报文的封装 // fatch 服务 app.all('/fatch-server', (request, response)=>{ // 设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin','*') //名字,值 response.setHeader('Access-Control-Allow-Headers','*') // 设置响应体 const data = {name:'HELLO axios AJAX!'} // response.send('HELLO jQuery AJAX!') response.send(JSON.stringify(data)) }); //4.监听端口启动服务 app.listen(8000, ()=>{ console.log("服务已经启动,8000 端口监听中..."); })
- 创建 fatch.html 文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fatch 发送 AJAX请求</title> </head> <body> <button>AJAX请求</button> <script> const btn = document.querySelector('button') btn.onclick = function(){ fetch('http://127.0.0.1:8000/fatch-server?vip=10',{ // 请求方法 method: 'POST', // 请求头 headers:{ name:'HELLO fatch AJAX!' }, // 请求体 body:'username=admin&password=admin' // then() 为响应，返回结果是 promise 对象 }).then(response => { // return response.text() return response.json() }).then(response => { console.log(response); }) } </script> </body> </html>
不积跬步无以至千里 不积小流无以成江海
