ajax技术中的.load(),$.get()以及$.post()方法的整理

最新推荐文章于 2021-05-25 16:55:26 发布

Gavin__Xie

最新推荐文章于 2021-05-25 16:55:26 发布

阅读量1k

点赞数

分类专栏：前端jQuery javaScript 文章标签： load get post

本文链接：https://blog.csdn.net/xiejinwen/article/details/70256987

版权

前端jQuery 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

javaScript

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>.load()和$.get()以及$.post()方法应用</title>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){

	/************************************************************************************************
	**             .load()方法是有三个参数的：url(必须的，请求文件的地址，参数类型为string)，        **
	**             data(可选，发送的key/value数据，参数类型为Object),                               **
	**             callback(可选，成功或失败的回调函数，参数类型为Function)                         **
	**                                                                                              **
	**************************************************************************************************/
		//当然我们使用load是获取服务器的文件，一般不仅仅需要载入数据，还需要向服务器传输数据，所以我们就
		//需要使用到第二个参数data，向服务器提交数据有两种方式：get和post;
		//如果不传递data,默认使用get方式；

			$('input').on('click',function(){
				$('#box').load('jinwen.php?url=jinwen');
			});

		//get方式的PHP

		//传递data，则使用post方式
		$('input').on('click',function(){
			$('#box').load('jinwen.php',{
				url: 'jinwen'
			});
		});

		//psot方式的PHP


		//在ajax载入数据完毕就能执行回调函数callback，也就是第三个参数，第三个参数是函数，也有三个可选参数：responseText(请求返回)，
		//textStatus（请求状态），XMLHttpRequest（XMLHttpRequests对象）

			$('input').on('click',function(){
				$('#box').load('jinwen.php',{
					url:'jinwen'
				},
				function(response,status,xhr){
					console.log('返回的值：' + response + '，请求状态：' + status + ',状态是:' + xhr.statusText);
				}) ;
			});
		//注意：status得到的值。如果成功返回数据则为success,否则为error;XMLHttpRequest是对象，可以调用一下的属性：responseText(作为响应主题被返回的文本)，
		//status（响应的HTTP状态），statusText（HTTP状态的说明，成功返回数据则返回"OK"字符串，
		//200 OK 服务器成功返回了页面 
		//400 BadRequest 语法错误导致服务器不识别
		// 401 Unauthorized 请求需要用户认证 
		//404 Notfound 指定的 URL 在服务器上找不到
		//500 InternalServerError 服务器遇到意外错误，无法完成请求
		//503 ServiceUnavailable 由于服务器过载或维护导致无法完成请求）


		//.load()方法是局部的方法，因为他需要一个包含元素的jQuery对象作为前缀，$.get()和$.post()是全局方法，不需要指定某个元素，
		//就用途而言，.load()方法比较适合做静态文件的一步获取，而对于需要传递数据到服务器页面的，$.get()和$.post()更加适合

		//$.get()方法有四个参数，前面三个参数和.load()方法一样，多了第四个参数：服务器返回的内容格式：包括 xml、html、script、json、jsonp 和 text。第一个参数为必选参数， 后面三个为可选参数。 

			$('input').on('click',function(){
				$.get('jinwen.php',{
					url:'jinwen'
				},function(response,status,xhr){
					if ( status=='success'){
						$('#box').html('谁最帅啊：' + response);	
					}
				});
			});
		//注意：第四参数 type 是指定异步返回的类型。一般情况下 type 参数是智能判断，并不 需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。
		//$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的 不同，在用户使用上体现不出。具体区别如下： 1.GET 请求是通过 URL 提交的，而 POST 请求则是 HTTP 消息实体提交的； 2.GET 提交有大小限制（2KB），而 POST 方式不受限制； 3.GET 方式会被缓存下来，可能有安全性问题，而 POST 没有这个问题； 4.GET 方式通过$_GET[]获取，POST 方式通过$_POST[]获取。

		});
	</script>
</head>
<body>
	<input type="button" value="异步获取数据"/>
	<div id="box"></div>
</body>
</html>