jQuery中的Ajax

m0_63400611

已于 2022-05-18 16:02:37 修改

阅读量73

点赞数

分类专栏： ajax 文章标签： ajax jquery 服务器

于 2021-12-23 22:51:16 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/122118131

版权

ajax 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

了解jQuery中的Ajax

浏览器提供的XMLHttpRequest用法复杂,所以jQuery对此进行了封装,降低了使用难度

$.get()函数的用法

用来发起get请求,将服务器上的资源请求到客户端来使用

语法:

$.get(URL, [data], [callback]);

三个参数的含义如下: watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16

$.get()发起不带参数的请求

代码使用案例:

<html>
<head>
<meta charset="utf-8">
<title>aaa</title>
	<script src="jQuery/jQuery.js"></script>
</head>

<body>
	
	<button id="btnGET">发起不带参数的GET请求</button>
	
	<script>
		$(function() {
			$('#btnGET').on('click', function() {
				$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
					console.log(res);
				})
			})
		})
	</script>
	
</body>
</html>

浏览器中点击F12,在网络选项中的Fetch/XHR中能看到getbooks信息 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16

$.get()发起不带参数的请求

代码使用案例:

<html>
<head>
<meta charset="utf-8">
<title>aaa</title>
	<script src="jQuery/jQuery.js"></script>
</head>

<body>
	
	<button id="btnGETINFO">发起带参数的GET请求</button>
	
	<script>
		$(function() {
			$('#btnGETINFO').on('click', function() {
				$.get('http://www.liulongbin.top:3006/api/getbooks', {id: 1}, function(res) {
					console.log(res);
				})
			})
		})
	</script>
	
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16

$.post()函数的用法

$.post()函数的功能单一,专门用来发起post请求向服务器提交数据

语法:

$.post(URL, [data], [callback]);

三个参数的含义如下:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16

$.post()向服务器提交数据

代码使用案例:

<html>
<head>
<meta charset="utf-8">
<title>aaa</title>
	<script src="jQuery/jQuery.js"></script>
</head>

<body>
	
	<button id="btnPOST">发起POST请求</button>
	
	<script>
		$(function() {
			$('#btnPOST').on('click', function() {
				$.post('http://www.liulongbin.top:3006/api/addbook', {bookname: '水浒传', author: '施耐庵', publisher: '橙子出版社'}, function(res) {
					console.log(res);
				})
			})
		})
		
	</script>
	
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16

$.ajax()函数的用法

$.ajax()函数是比较综合的函数,允许对Ajax请求进行更详细的配置

语法:

$.ajax({type: '',					//请求的方式(GET或POST)
			   	url: '',					//请求的URL地址
			   	data: {},					//请求要携带的数据
			   	success: function(res){}	//请求成功之后的回调函数
			   })

使用$.ajax()发起GET请求

代码使用案例:

<html>
<head>
<meta charset="utf-8">
<title>aaa</title>
	<script src="jQuery/jQuery.js"></script>
</head>

<body>
	
	<button id="btnGET">发起GET请求</button>
	
	<script>
		$(function() {
			$('#btnGET').on('click', function() {
				$.ajax({type: 'GET',
					url: 'http://www.liulongbin.top:3006/api/getbooks',
					data: {id: 1},
					success: function(res){
						console.log(res);
					}
			   })
			})
		})
	</script>
	
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16

使用$.ajax()发起POST请求

代码使用案例:

<html>
<head>
<meta charset="utf-8">
<title>aaa</title>
	<script src="jQuery/jQuery.js"></script>
</head>

<body>
	
	<button id="btnPOST">发起POST请求</button>
	
	<script>
		$(function() {
			$('#btnPOST').on('click', function() {
				$.ajax({type: 'POST',
					url: 'http://www.liulongbin.top:3006/api/addbook',
					data: {
						bookname: '水浒传',
						author: '施耐庵',
						publisher: '橙子出版社'
					},
					success: function(res){
						console.log(res);
					}
			   })
			})
		})
	</script>
	
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16