2.AJAX-CSDN博客

本文链接：https://blog.csdn.net/qq_17699069/article/details/115656356

本文详细介绍了如何使用AJAX在网页上调用后台提供的服务接口，包括GET和POST请求方式，以及如何处理返回的数据。示例代码展示了jQuery中$.ajax()方法的使用，包括设置请求参数、数据类型、回调函数等，同时也提到了后台获取参数的方法。通过AJAX，可以在不刷新页面的情况下实现异步数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台提供的服务（接口），前台页面如何调用？ http://127.0.0.1:8080/QueryAll ， http://127.0.0.1:8080/QueryById?from=20180002&to=20180004

AJAX, 一种在网页上调用后台接口的方式。

jQuery里提供了AJAX调用的方法，$.ajax ( { ... 参数 ... } ) 其中， $.ajax() 等同于 jQuery.ajax() ，参数里面是一个JS对象。

			$.ajax({
				url:'PoemSave.api',
				data:JSON.stringify(req),
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(resp){//当服务器返回应答时，调用此function处理
                                       //(回调方法 )
					if(resp.error==0)
					{
						location.href="index.do";
					}
					else
					{
						alert("保存失败!"+data.reason);
					}
				},
				error:function(xhr,type,errorThrown){
					
				}
			});

还有一种简化写法

	$.get('QueryAll', function(resp){  
			console.log(resp);
	});

在用 ajax() 访问后台接口时，可以附加请求参数。ajax() 内部会处理 data，凑出一个参数字符串，形如 ?key1=value1&key2=value2 ...，附加在 URL后面

	$.ajax({
		type:'GET', 
		url:'QueryById',   
		data: req, 
		...
	}

servlet里面获取参数方法依旧是request.getParameter(key)。

ajax() 默认是异步方式：不等待服务器返回结果，立即返回。当服务器返回结果时，调用回调方法进行处理。

		function query()
		{
			// 请求参数
			var req = {};
			req.filter = $('.toolbar .filter').val().trim();
			
			$.ajax({
				type:'GET',       /* 请求类型 GET / POST */ 
				url:'QueryByName',   /* 服务URI, 用相对地址 */		
				data: req,        /* 附加请求参数 */
				dataType: 'json', /* 期望服务器返回的数据类型 */
				success: function(resp){  /* 已经将服务器返回的数据转成 JS对象 */
					console.log("服务器返回查询数据...");
					showResult(resp);
				}
			});
			console.log("query()方法结束...");
		}

控制台打印结果：

query()方法结束...

服务器返回查询数据...