jQuery实现Ajax的整理

最新推荐文章于 2021-12-14 11:07:36 发布

zzjmay

最新推荐文章于 2021-12-14 11:07:36 发布

阅读量638

点赞数

文章标签： jQuery Ajax

本文链接：https://blog.csdn.net/zzjmay/article/details/22822269

版权

我们可以通过jQuery来实现接收和发送Ajax请求，并且十分的方便

1) $(selector).load(url,[data],[callback]):载入远程的Html文档到已知的DOM中

i. url ：请求的地址

ii. data：可选，发送至服务器的 key/value 数据

iii. callback：可选，回调函数

默认使用 GET 方式，传递附加参数时自动转换为 POST 方式

传递参数有两种方法：

1）通过传统的传参方法name=””&age=10，注意发送的请求的是GET请求

2）通过JSON的方法进行传递参数{“name”:””,”age”:100}注意发送的请求时POST请求，（推荐使用该种方法进行传递参数）

load能够载入远程 HTML 文件代码并插入至 DOM 中

匹配的元素应该只有一个

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
	<script type="text/javascript">
	
		$(function(){
		
			$("#toLoadHtml").click(function(){
				$("#loadContent").load("test.html");
			
			});
			
			$("#toLoadService").click(function(){
				/*$("#loadService").load("index.jsp","name=oracle&age=100",function(){
					alert("加载完毕");
				
				});*/
				$("#loadService").load("index.jsp",{"name":"oracle","age":50},function(){
					alert("加载完毕");
				
				});
			
			});
		
		});
		
	
	</script>
  </head>
  
  <body>
	  <input type="button" value="加载HTML" id="toLoadHtml">
	  <input type="button" value="加载JSP" id="toLoadService">
	  <div id="loadContent"></div>
	  <div id="loadService"></div>
  </body>

2）$.get(url,[data],[callback]):发送get请求，进行异步更新，通过在callback中进行页面元素的更新，注意与load方法不同在与：不要实现确定具体的元素，而是有jQuery直接发送，在function进行动态的指定更新

$(function(){
		
			$("#toGet").click(function(){
				$.get("testMeth",{"name":"zzjmay","age":100},function(data){//表示服务器传回来的参数
					$("#loadGetMeth").text(data);
				
				});
			
			});
		
		});

3）$.post(url,[data],[callback]):发送post的请求

$(function(){
		
			$("#toPost").click(function(){
				$.post("testMeth",{"name":"甲骨文公司","age":60},function(data){//data表示服务器传回来的参数
					$("#loadGetMeth").text(data);
				
				});
			
			});
		
		});

$.ajax(setting):是一种完整的写法，不推荐使用，唯一需要注意的就是里面的参数是以JSON的对象的形式进行封装的

参数名	说明
async	逻辑值，默认为 true，即请求为异步请求
data	发送到服务器的数据将自动转换为请求字符串格式
dataType	返回的数据类型
error	请求失败时调用函数
success	请求成功后回调函数
timeout	设置请求超时时间（毫秒）
type	发送请求的方式，默认为 GET
url	发送请求的地址

zzjmay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现Ajax的整理

我们可以通过jQuery来实现接收和发送Ajax请求，并且十分的方便 1) $(selector).load(url,[data],[callback]):载入远程的Html文档到已知的DOM中 i. url ：请求的地址 ii. data：可
复制链接

扫一扫