1.用jQuery发送Ajax请求
<!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>Document</title><link rel="stylesheet" href="/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><script src="/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><div class="container"><h2 class="page-header">jQuery发送AJAX请求</h2><button class="btn btn-primary">GET</button><button class="btn btn-danger">POST</button><button class="btn btn-info">通用型方法AJAX</button></div><script>$('button').eq(0).click(function(){$.get('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){console.log(data);},'json')})$('button').eq(1).click(function(){$.post('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){console.log(data);})})$('button').eq(2).click(function(){$.ajax({// urlurl:'http://127.0.0.1:8000/jquery',// 参数data:{a:100,b:200},// 请求类型type:'GET',// 成功的回调success:function(data){console.log(JSON.parse(data));},// 超时时间timeout:2000,// 失败的回调error:function(){console.log('出错啦!!!');},// 头信息headers:{c:300,d:400}})})</script></body></html>
服务器用express框架创建简单的本地服务器
// 1.引入expressconst express = require('express');// 2.创建应用对象const app = express();// 3.创建路由规则// request 是对请求报文的封装// response 是对响应报文的封装// jQuery 服务app.all('/jquery',(request,response)=>{response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data = {name:'yangy'}response.send(JSON.stringify(data));})// axios服务app.all('/axios',(request,response)=>{response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data = {name:'yangy'}response.send(JSON.stringify(data));})// fetch服务app.all('/fetch',(request,response)=>{response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data = {name:'yangy'}response.send(JSON.stringify(data));})// 4.监听端口启动app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中...");})
2.用axios发送请求
<!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"><link rel="stylesheet" href="/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><script crossorigin="anonymous" src="/ajax/libs/axios/0.21.1/axios.js"></script><title>axios 发送AJAX请求</title></head><body><button class="btn btn-primary">GET</button><button class="btn btn-success">POST</button><button class="btn btn-info">AJAX</button><script>const btns = document.querySelectorAll('button');// 配置 baseURLaxios.defaults.baseURL = 'http://127.0.0.1:8000';btns[0].onclick = function(){// GET请求axios.get('/axios',{// url 参数params:{id:100,vip:7},// 请求头信息headers:{name:'yangy',age:21}}).then(value =>{console.log(value);})}btns[1].onclick = function(){axios.post('/axios',{username:'admin',password:'admin' },{// urlparams:{id:200,vip:9},// 请求头参数headers:{height:180,weight:180,}})}btns[2].onclick = function(){axios({// 请求方法method:'POST',// urlurl:'/axios',// url参数params:{vip:10,level:30},// 头信息headers:{a:100,b:200},// 请求体参数data:{username:'admin',password:'admin'}}).then(response =>{console.log(response);// 响应状态码console.log(response.status);// 响应状态字符串console.log(response.statusText);// 响应头信息console.log(response.headers);// 响应体console.log(response.data);})}</script></body></html>
3.使用fetch函数发送ajax请求
<!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>fetch 发送 AJAX</title></head><body><button>AJAX请求</button><script>const btn = document.querySelector('button');btn.onclick = function () {fetch('http://127.0.0.1:8000/fetch?vip=10', {// 请求方法method: 'POST',// 请求头headers: {name: 'yangy'},// 请求体body: 'username=admin&password=123456'}).then(response => {return response.json();}).then(response=>{console.log(response);})}</script></body></html>
