AJAX学习笔记

最新推荐文章于 2024-04-28 04:05:42 发布

Algorithm_goddness

最新推荐文章于 2024-04-28 04:05:42 发布

阅读量190

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/Algorithm_goddness/article/details/80853232

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS的jQuery库封装好了AJAX的XHR方法，所以我们不需要去自己new一个XMLHttpRequest了，这里是AJAX应用在jQuery中的小例子：

GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据

GET例子

&(document).ready(function(){
	&("#search").click(function(){
		$.ajax({
			type:"GET",
			url:"service.php?number=" + $("#keyword").val(),
			dataType:"json",
			success:function(data){
				if(data.success){
					$("#searchResult").html(data.msg);
				}else{
					$("#searchResult").html("出现错误：" + data.msg);
				}
			},
			error:function(jqXHR){
				alaert("发生错误：" + jqXHR.status);
			}
		});
	

	});
});

"service.php?number=" + $("#keyword").val();//jQuery写法
"service.php?number=" + document.getElementById("keyword").value;//JS写法

$("#searchResult").html(data.msg);//jQuery写法
document.getElementById("searchResult").innerHTML = data.msg;//JS写法

POST例子

&(document).ready(function(){
	&("#save").click(function(){
		$.ajax({
			type:"POST",
			url:"service.php",
			dataType:"json",
			data:{
				name:$("#staffName").val(),
				gender:$("#staffgender").val()
			},
			success:function(data){
				if(data.success){
					$("#createResult").html(data.msg);
				}else{
					$("#createResult").html("出现错误：" + data.msg);
				}
			},
			error:function(jqXHR){
				alaert("发生错误：" + jqXHR.status);
			}
		});
	

	});
});