一、Ajax
- Ajax的全称是 Asynchronous Javascript And XML(异步Javascript和XML)。
- 通俗理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax。
- ajax通信的过程不会影响后续javascript的执行，从而实现异步。
二、jQuery中的Ajax
浏览器中的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度
-
jQuery中发起Ajax请求常用的三个方法如下：
- $.get()
- $.post()
- $.ajax()
-
$.get()函数
- 专门用来发起get请求
- 语法
$.get(url, [data], [callback])
- 三个参数含义：
- url
- 要请求的资源地址
- string类型
- 必选
- data
- 请求资源要携带的参数
- object类型
- 可选
- callback
- 请求成功时的回调函数
- function类型
- 可选
- url
- 示例
<!DOCTYPE html> <html lang="zh"> <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>Ajax</title> <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script> </head> <body> <button id="btn">点我一下</button> <script> $('#btn').on('click',function (){ $.get('http://www.liulongbin.top:3006/api/getbooks',{id: 1},function (res) { console.log(res) }) }) </script> </body> </html>
-
$.post()函数
- 专门用来发起post请求
- 语法
$.post(url, [data], [callback])
- 三个参数的含义：
- url
- 提交数据的地址
- string类型
- 必选
- data
- 要提交的数据
- object类型
- 可选
- callback
- 数据提交成功时的回调函数
- function类型
- 可选
- url
- 示例
<!DOCTYPE html> <html lang="zh"> <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>Ajax</title> <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script> </head> <body> <button id="btn">点我一下</button> <script> $('#btn').on('click',function (){ $.post( 'http://www.liulongbin.top:3006/api/addbook', // 请求的url {bookname: '骆驼祥子', author: '老舍', publisher: '上海图书出版社'}, // 提交的数据 function (res) { // 回调函数 console.log(res) } ) }) </script> </body> </html>
-
$.ajax()函数
- 相比于$.get()和$.post()函数，$.ajax()是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。
- 语法
$.ajax({ type: '' , // 请求的方式，例如GET 或 POST（大写小写均可以） url: '', // 请求的url地址 data: {}, // 这次请求要携带的数据，可选 success: function(res) {} // 请求成功后的回调函数 })参数是一个配置对象
-
示例
<!DOCTYPE html> <html lang="zh"> <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>Ajax</title> <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script> </head> <body> <button id="btn">点我一下</button> <script> $('#btn').on('click',function (){ /* 发送get请求 $.ajax( { type: 'GET', url: 'http://www.liulongbin.top:3006/api/getbooks', data: {id: 1}, success: res => console.log(res) } ) */ // 发送post请求 $.ajax({ type: 'POST', url: 'http://www.liulongbin.top:3006/api/addbook', data: { bookname: '骆驼祥子', author: '老舍', publisher: '上海图书出版社' }, success: res => console.log(res) }) }) </script> </body> </html>
标签：function,请求,get,url,res,学习,Ajax From： https://www.cnblogs.com/eliwang/p/16825057.html