JQuery之异步操作

最新推荐文章于 2021-08-25 19:09:45 发布

原创最新推荐文章于 2021-08-25 19:09:45 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何利用Ajax技术实现网页上的实时搜索反馈及数据保存功能，详细讲解了使用GET请求进行搜索操作和POST请求保存数据的具体实现过程，包括jQuery的使用、JSON数据解析以及错误处理。

$(document).ready(function(){ 
	$("#search").click(function(){ 
		$.ajax({ 
		    type: "GET", 	
			url: "/index/index/search?number=" + $("#keyword").val(),
			dataType: "json",
			success: function(data) {
				if (data.success) { 
					$("#searchResult").html(data.msg);
				} else {
					$("#searchResult").html("出现错误：" + data.msg);
				}  
			},
			error: function(jqXHR){     
			   alert("发生错误：" + jqXHR.status);  
			},     
		});
	});
	
	$("#save").click(function(){ 
		$.ajax({ 
		    type: "POST", 	
			url: "/index/index/save",
			data: {
				name: $("#staffName").val(), 
				sex: $("#staffSex").val(), 		
			},
			dataType: "json",
			success: function(data){
				if (data.success) { 
					$("#createResult").html(data.msg);
				} else {
					$("#createResult").html("出现错误：" + data.msg);
				}  
			},
			error: function(jqXHR){     
			   alert("发生错误：" + jqXHR.status);  
			},     
		});
	});
});

$(document).ready(function(){ 
	$("#search").click(function(){ 
		$.ajax({ 
		    type: "GET", 	
			url: "/index/index/search?number=" + $("#keyword").val(),
			dataType: "jsonp",
			jsonp: "callback",
			success: function(data) {
				if (data.success) {
					$("#searchResult").html(data.msg);
				} else {
					$("#searchResult").html("出现错误：" + data.msg);
				}  
			},
			error: function(jqXHR){     
			   alert("发生错误：" + jqXHR.status);  
			},     
		});
	});
	
	$("#save").click(function(){ 
		$.ajax({ 
		    type: "POST", 	
			url: "/index/index/save",
			data: {
				name: $("#staffName").val(), 
				sex: $("#staffSex").val(), 
			},
			dataType: "json",
			success: function(data){
				if (data.success) { 
					$("#createResult").html(data.msg);
				} else {
					$("#createResult").html("出现错误：" + data.msg);
				}  
			},
			error: function(jqXHR){     
			   alert("发生错误：" + jqXHR.status);  
			},     
		});
	});
});

参考imooc教程