Web基础——原生Ajax和jQuery分别发送Ajax请求_通过原生的ajax、jquery、$.ajax()、axios分别发送ajax请求。后台使用exp-CSDN博客

本文链接：https://blog.csdn.net/weixin_43496491/article/details/122638591

1.原生Ajax之get请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="sendAjax()">发送Get请求</button>
		<h1>每日一笑</h1>
		<ul id="myul">
		</ul>
	</body>
	<script type="text/javascript">
		function sendAjax() {
			//创建对象
			var xmlhttp = new XMLHttpRequest();
			//发送请求
			xmlhttp.open("GET", "https://autumnfish.cn/api/joke/list?num=10", true);
			xmlhttp.send();
			//接收服务器的响应
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					//接收后台响应的json字符串
					 var jsonStr=xmlhttp.responseText;
					 console.log(jsonStr);
					var jsonObj= JSON.parse(jsonStr);
					var ul= document.getElementById("myul");
					var arr=jsonObj.jokes;
					for(let i=0;i<arr.length;i++){
						ul.innerHTML+="<li>"+arr[i]+"</li>";
					}
				}
			}
		}
	</script>
</html>

2.原生Ajax之post请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="sendAjax()">发送POST请求</button>
	</body>
	<script type="text/javascript">
		function sendAjax() {
			//创建对象
			var xmlhttp = new XMLHttpRequest();
			//发送请求
			xmlhttp.open("POST", "http://localhost:8080/login", true);
			//3.设置请求头信息
			 xmlhttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
			//post请求，参数写在send()方法里面
			xmlhttp.send("username=zhangsan&password=123456");
			//接收服务器的响应
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					//接收后台响应的json字符串
					 var jsonStr=xmlhttp.responseText;
					 console.log(jsonStr);
					 var obj=JSON.parse(jsonStr);
					 alert(obj.msg);
				}
			}
		}
	</script>
</html>

3.jQuery发送get请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">发送Ajax请求</button>
	</body>
	<script type="text/javascript">
		$('button').click(function(){
			 $.ajax({
	                url:"https://autumnfish.cn/api/joke/list?num=10" , // 请求路径
	                type:"GET" , //请求方式
					//请求成功之后的回调
	                success:function (data) {
						//data后台返回的json数据，已经帮你转换成JSON对象
	                    alert(data.msg);
						//操作DOM ,把返回的数据解析出来，展示到页面上
	                },//响应成功后的回调函数
					//表示如果请求响应出现错误，会执行的回调函数
	                error:function () {
	                    alert("出错啦...")
	                },
	                dataType:"json"//设置接受到的响应数据的格式 text 普通的文本字符串
	            });
		})
	</script>
</html>

4.jQuery发送post请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">发送Ajax请求</button>
	</body>
	<script type="text/javascript">
		$('button').click(function() {
			$.ajax({
				url: "http://localhost:8080/login", // 请求路径
				type: "POST", //请求方式
				//请求参数  也可以这样写 data: "username=jack&age=23",
				//data: "username=jack&age=23",
				data: {
					"username": "zhangsan",
					"password": "123456"
				},
				//请求成功之后的回调
				success: function(data) {
					//data后台返回的json数据，已经帮你转换成JSON对象
					alert(data.msg);
					//操作DOM ,把返回的数据解析出来，展示到页面上
				}, //响应成功后的回调函数
				//表示如果请求响应出现错误，会执行的回调函数
				error: function() {
					alert("出错啦...")
				},
				dataType: "json" //设置接受到的响应数据的格式 text 普通的文本字符串
			});
		})
	</script>
</html>

5.jQuery简化的get和post请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">发送Ajax GET请求</button>
		<button type="button">发送Ajax请求后台就是返回json数据</button>
		<button type="button">发送Ajax POST请求</button>
	</body>
	<script type="text/javascript">
		$('button').first().click(function() {
			/* * 语法：$.get(url, [data], [callback], [type])
			 * 参数：
			 * url：请求路径
			 * data：请求参数
			 * callback：回调函数
			 * type：响应结果的类型 */

			$.get('https://autumnfish.cn/api/joke/list', {
				"num": "10"
			}, function(data) {
				alert(data.msg);
			}, "json");
		})

		$('button').last().click(function() {
			/* * 语法：$.post(url, [data], [callback], [type])
			 * 参数：
			 * url：请求路径
			 * data：请求参数
			 * callback：回调函数
			 * type：响应结果的类型 */

			$.post('http://localhost:8080/login', {
				"username": "zhangsan",
				"password": "123456"
			}, function(data) {
				alert(data.msg);
			}, "json");
		})

		$('button').eq(1).click(function() {
			$.getJSON('http://localhost:8080/login', {
				"username": "zhangsan",
				"password": "123456"
			}, function(data) {
				alert(data.msg);
			});
		})
	</script>
</html>