一、jQuery中的AJAX
BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
我们将该链接引入get.html文件里面：
service.js:
//1.引入express const express=require('express'); //2.创建应用对象 const app=express(); //3.创建路由规则 //request是对请求报文的封装 //response是对响应报文的封装 app.get('/server',(request,response)=>{ //设置响应头,设置允许跨域 response.setHeader('Access-Control-Allow-Origin','*'); //设置响应体 response.send('HELLO AJAX') }); //延时响应 app.get('/delay',(request,response)=>{ //设置响应头,设置允许跨域 response.setHeader('Access-Control-Allow-Origin','*'); setTimeout(()=>{ //设置响应体 response.send('延时响应'); },3000) }); //jQuery 服务 app.all('/jQuery-server',(request,response)=>{ //设置响应头,设置允许跨域 response.setHeader('Access-Control-Allow-Origin','*'); const data={name:'woer'} let str=JSON.stringify(data); //设置响应体 response.send(str); }); //可以接收任意类型的请求 app.all('/server',(request,response)=>{ //设置响应头,设置允许跨域 response.setHeader('Access-Control-Allow-Origin','*'); //响应头 response.setHeader('Access-Control-Allow-Headers','*'); //设置响应体 response.send('HELLO AJAX POST') }); app.all('/json-server',(request,response)=>{ //设置响应头,设置允许跨域 response.setHeader('Access-Control-Allow-Origin','*'); //响应头 response.setHeader('Access-Control-Allow-Headers','*'); //响应一个数据 // const data={ // name:'woer' // } //对对象进行字符串转换 // let str=JSON.stringify(data); //设置响应体,send方法里面只能接收字符串和Buffer response.send('HELLO AJAX POST') }); /*function chan(){ return console.log("服务已经启动，8000端口监听中..."); } 可以用如下方法，也可以采用function定义的方法 */ //4.监听端口启动服务 app.listen(8000,()=>{ console.log("服务已经启动，8000端口监听中..."); }) /*其中 ()=>{ console.log("服务已经启动，8000端口监听中..."); } 相当于： function ajax()｛ return console.log("服务已经启动，8000端口监听中..."); } */
setTimeout() 全局函数
全局的 setTimeout() 方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。
Get.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>jQuery 发送 AJAX请求</title> <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootcdn"> <!-- crossorigin 属性在 <audio>、<img>、<link>、<script> 和 <video> 元素中有效，它们提供对 CORS(跨源资源共享) 的支持， 定义该元素如何处理跨源请求，从而实现对该元素获取数据的 CORS(跨源资源共享) 请求的配置。根据元素的不同，该属性可以是一个 CORS 设置属性。 --> <script crossorigin="anonymous"src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- crossorigin向这个资源发送请求的时候，不会携带当前域名下的cookie. --> </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-server',{a:100,b:200},function(data){ console.log(data); },'json') }) // 结果是个对象 $('button').eq(1).click(function(){ $.post('http://127.0.0.1:8000/jQuery-server',{a:100,b:200},function(data){ console.log(data); }) }) // 结果是个字符串 </script> </body> </html>
$(' ').eq(0).click()
eq() 方法将匹配元素集缩减值指定 index 上的一个。
jQuery 遍历 - eq() 方法 (w3school.com.cn)
$.get()
语法
$.get(URL,data,function(data,status,xhr),dataType)
| 参数 | 描述 |
|---|---|
| URL | 必需。规定您需要请求的 URL。 |
| data | 可选。规定连同请求发送到服务器的数据。 |
| function(data,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数：
|
| dataType | 可选。规定预期的服务器响应的数据类型。 默认地，jQuery 会智能判断。 可能的类型：
|
jQuery get() 方法 | 菜鸟教程 (runoob.com)
二、jQuery通用方法发送AJAX请求
$.ajax(url,[settings]) | jQuery API 3.2 中文文档 | jQuery API 在线手册 (cuishifeng.cn)
get.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>jQuery 发送 AJAX请求</title> <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootcdn"> <!-- crossorigin 属性在 <audio>、<img>、<link>、<script> 和 <video> 元素中有效，它们提供对 CORS(跨源资源共享) 的支持， 定义该元素如何处理跨源请求，从而实现对该元素获取数据的 CORS(跨源资源共享) 请求的配置。根据元素的不同，该属性可以是一个 CORS 设置属性。 --> <script crossorigin="anonymous"src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- crossorigin向这个资源发送请求的时候，不会携带当前域名下的cookie. --> </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-server',{a:100,b:200},function(data){ console.log(data); },'json') }) // 结果是个对象 $('button').eq(1).click(function(){ $.post('http://127.0.0.1:8000/jQuery-server',{a:100,b:200},function(data){ console.log(data); }) }) // 结果是个字符串 $('button').eq(2).click(function(){ $.ajax({ //url url:'http://127.0.0.1:8000/jQuery-server', //参数 data:{a:100,b:200}, //请求类型 type:'GET', //响应体结果 dataType:'json', //成功的回调 success:function(data){ console.log(data); }, //超时时间 timeout:2000, //失败的回调 error:function(){ console.log('出错啦！！'); }, //
