Ajax 异步请求几种方式—— load、get、post、getJSON

最新推荐文章于 2021-11-27 12:13:00 发布

五笔小哥

最新推荐文章于 2021-11-27 12:13:00 发布

阅读量839

点赞数

分类专栏：代码知识文章标签： Ajax异步请求 load请求用法 get 请求用法 post 请求用法 getJSON请求用法

本文链接：https://blog.csdn.net/qq_43344133/article/details/90345910

版权

代码知识专栏收录该内容

42 篇文章 0 订阅

订阅专栏

Ajax 异步请求几种方式—— load、get、post、ajax、getJSON

Ajax 异步请求的方式有很多，当前这里所介绍的都是建立在 Jquery 库的基础上使用的请求方式；
每种请求方式都有它的可取之处，下面通过实例来一一介绍。

Ajax 请求 —— load

定义：.load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Load 请求</title>
	<script src="./js/jquery.min.js"></script>
</head>
<style>
	.result{
		width:200px;
		height: 200px;
		border:1px #0f0 solid;
		margin-bottom: 20px;
	}
</style>
<body>
	<button type="button">使用 load 请求 获取数据</button>
	<div class="result"></div>
	<script>
		$(function(){
			$('button').on('click',function(){
				//使用 load 请求方式；
				//1.最简单的请求
				// $('.result').load('./text.php');

				//2.带有请求完成时运行的函数
				/* $('.result').load('./text.php',function(response,status,xhr){
					console.log(response); //请求的结果数据
					console.log(status); //请求的状态"success"
					console.log(xhr); //响应 XMLHttpRequest 对象
				});*/

				//3.带有参数请求，和请求完成时运行的函数
				$('.result').load('./text.php',{id: 25},function(response,status,xhr){
					console.log(response); //请求的结果数据
					console.log(status); //请求的状态"success"
					console.log(xhr); //响应 XMLHttpRequest 对象
				});
			});
		});
	</script>
</body>
</html>

上面例子中需要放在服务器端运行，并且使用了三种方式请求，当前前两种方式已注释；

如果请求的为 .txt 文档，返回后在页面上显示的为乱码，请确认请求的 .txt 文档是不是 utf-8 格式；如果不是，可将文档修改另存为时，选择编码格式为 utf-8 ; 后面一样，不再赘述。

.load() 请求相关参数可参考文档：http://www.w3school.com.cn/jquery/ajax_load.asp

Ajax 请求 —— get

定义：.get() 方法通过远程 HTTP GET 请求载入信息。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Get 请求</title>
	<script src="./js/jquery.min.js"></script>
</head>
<style>
	.result{
		width:200px;
		height: 200px;
		border:1px #0f0 solid;
		margin-bottom: 20px;
	}
</style>
<body>
	<button type="button">使用 get请求 获取数据</button>
	<div class="result"></div>
	<script>
		$(function(){
			$('button').on('click',function(){
				//使用 get 请求方式；
				//1.最简单的请求,一般用于请求网页
				// $.get('./test.php');

				//2.请求完成后带有返回值
				/* $.get('./test.php',function(data){
					console.log(data); //请求的结果数据
				});*/

				//3.请求完成后带有返回值，且设置服务器响应的数据类型。 
				//类型有：xml html text script json jsonp
				/* $.get('./test.php',function(data){
					console.log(data); //请求的结果数据
				},'html');*/

				//4.带有参数请求，请求完成后带有返回值，且设置服务器响应的数据类型。 
				$.get('./test.php',{id: 25},function(data){
					console.log(data); //请求的结果数据
				},'json');
			});
		});
	</script>
</body>
</html>

上面例子中需要放在服务器端运行，并且使用了四种方式请求，当前前三种方式已注释；注意设置了服务器响应数据类型，一定要对应，否则报错。不设置数据类型，jQuery 会智能判断。

.get() 请求的相关参数可参考文档：http://www.w3school.com.cn/jquery/ajax_get.asp

Ajax 请求 —— post

定义：通过 HTTP POST 请求从服务器载入数据。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Post 请求</title>
	<script src="./js/jquery.min.js"></script>
</head>
<style>
	.result{
		width:200px;
		height: 200px;
		border:1px #0f0 solid;
		margin-bottom: 20px;
	}
</style>
<body>
	<form action="" id="formInfor">
		<input type="hidden" name="id">
		<input type="text" name="username">
	</form>
	<button type="button">使用 post请求 获取数据</button>
	<div class="result"></div>
	<script>
		$(function(){
			$('button').on('click',function(){
				//使用 post 请求方式；
				//1.简单的带参数请求,忽略返回值
				// $.post('./test.php',{ id: "6",name: "zhaoliu" });
				// $.post('./test.php',{ 'choices[]': ["Jon", "Susan"] }); //向服务器传递数据数组

				//2.请求发送表单数据：
				// $.post("test.php", $("#formInfor").serialize());
				/* $.post('./test.php',function(data){
					console.log(data); //请求的结果数据
				});*/

				//3.请求带参数，且带有返回值；
				/* $.post('./test.php',{ id: "6",name: "zhaoliu" }, function(data){
					console.log(data); //请求的结果数据
				});*/

				//4.请求带参数，且带有返回值，且设置服务器响应的数据类型。 
				//类型有：xml html script json
				$.post('./test.php',{ id: "6",name: "zhaoliu" }, function(data){
					console.log(data); //请求的结果数据
				},'json');
			});
		});
	</script>
</body>
</html>

说明：如果由 .post() 发起的请求返回错误代码，那么不会有任何提示，除非脚本已调用了全局的 .ajaxError() 方法。或者对于 jQuery 1.5，jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。

.post() 请求的相关参数可参考文档：http://www.w3school.com.cn/jquery/ajax_post.asp

Ajax 请求 —— getJSON

定义：使用 HTTP GET 请求从服务器加载 JSON 编码数据。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>getJSON 请求</title>
	<script src="./jquery.min.js"></script>
</head>
<style>
	.result{
		width:200px;
		height: 200px;
		border:1px #0f0 solid;
		margin-bottom: 20px;
	}
</style>
<body>
	<button type="button">使用 getJSON请求 获取数据</button>
	<div class="result"></div>
	<script>
		$(function(){
			$('button').on('click',function(){
				//使用 getJSON 请求方式；
				//1.请求不带参数，且带有返回值；
				/* $.getJSON('./test.js',function(data){
					console.log(data.users); //请求的结果数据
				});*/

				//2.请求带参数，且带有返回值； 
				//类型有：xml html script json
				$.getJSON('./test.js',{ id: "6" }, function(data){
					console.log(data.users.name); //请求的结果数据
				});
			});
		});
	</script>
</body>
</html>

上面例子中需要放在服务器端运行，并且使用了两种方式请求，当前第一种方式已注释；

注意：返回数据，可以是 JavaScript 对象，或以 JSON 结构定义的数组。

.getJSON() 请求的相关参数可参考文档：http://www.w3school.com.cn/jquery/ajax_getjson.asp

对于ajax的异步请求，除了这几种方式，有时候远远不能满足开发着的需求，那么，还有一个功能更强大，更加灵活的异步请求方法就是 —— .ajax() ; 本节先到这里，关于 .ajax() 使用请前往下一篇文档：https://blog.csdn.net/qq_43344133