首页 前端知识 jQuery中的ajax

jQuery中的ajax

2024-03-07 08:03:42 前端知识 前端哥 576 453 我要收藏

jQuery中的ajax

    • $.get函数的语法
    • $.get发起不带参数的get请求
    • $.get发起不带参数的get请求
    • $.post向服务器提交数据
    • 使用$.ajax发送get请求
    • 使用$.ajax发送post请求

$.get函数的语法

$.get函数专门用来发起get请求,从而将服务器上的资源请求到客户端来进行使用。

$.get函数语法:

$.get(url,[data],[callback])
//url:必选参数,[],可选参数

在这里插入图片描述

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

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="js/jquery-3.6.0.js"></script>
</head>
<body>
	<button id="btnGET">get请求</button>
	<script type="text/javascript">
		$(function(){
			$('#btnGET').on('click',function(){
				$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
					console.log(res);
				})
			})
		})
	</script>
</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button id="btnGETINFO">带参数get请求</button>
		<script>
		$(function(){
			$('#btnGETINFO').on('click',function(){
				$.get('http://www.liulongbin.top:3006/api/getbooks',{id:2},function(res){
					console.log(res)
				})
			})
		})
		</script>
	</body>
</html>

$.post向服务器提交数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
	</head>
	<body>
		<button id="btnPOST">发起post请求</button>
		<script type="text/javascript">
		$(function(){
			$('#btnPOST').on('click',function(){
				$.post('http://www.liulongbin.top:3006/api/addbook',{bookname:'水浒传',author:'施耐庵',publisher:'天津图书出版社'},function(res){
					console.log(res);
				})
			})
		})
		</script>
	</body>
</html>

使用$.ajax发送get请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
	</head>
	<body>
		<button type="button" id="btnGET">使用ajax发起get请求</button>
		<script type="text/javascript">
			$(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>

使用$.ajax发送post请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
	</head>
	<body>
		<button type="button" id="btnPOST">使用ajax发起post请求</button>
		<script type="text/javascript">
			$(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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3412.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!