ajax获取action返回数据库

本文将介绍如何使用Ajax来获取Action返回数据库的数据。通过Ajax技术，我们可以实现在不刷新整个页面的情况下，从服务器端获取最新的数据，并将其展示在页面上。这样不仅可以提升用户体验，还可以减少服务器的负担。

假设我们有一个书店网站，用户可以通过搜索功能来查找他们感兴趣的图书。当用户输入关键字后，我们希望通过Ajax来获取数据库中匹配的图书信息，并将其展示在页面上。以下是一个示例的实现过程：

首先，我们需要在页面中引入jQuery库，便于使用其提供的Ajax功能。可以通过以下代码将jQuery库引入到我们的页面中：

接下来，我们需要编写一个JavaScript函数来处理用户的关键字搜索请求，并通过Ajax发送请求到服务器端。以下是一个示例的JavaScript代码：

function searchBooks(keyword) {
$.ajax({
url: "searchAction.action",  // 请求的URL地址
type: "POST",  // 请求方式，默认为GET方式
data: {keyword: keyword},  // 发送到服务器端的数据
success: function(result) {  // 请求成功后的回调函数
if (result.success) {
var books = result.data;  // 从返回的结果中获取图书信息
// 将图书信息展示在页面上
for (var i = 0; i < books.length; i++) {
$("body").append("
" + books[i].name + "
");
}
} else {
alert(result.message);  // 请求失败时，提示错误信息
}
},
error: function() {  // 请求出错时的回调函数
alert("请求出错，请稍后重试！");
}
});
}

在上述代码中，我们使用了$.ajax()方法来发起异步请求。其中，url参数指定了请求的URL地址，type参数指定了请求方式为POST，data参数指定了要发送到服务器端的数据。当请求成功后，success回调函数会被触发，我们可以在回调函数中获取到返回的结果，并将图书信息展示在页面上。若请求失败，则error回调函数会被触发，我们可以在其中处理错误情况。

服务器端的Action代码需要根据接收到的关键字进行数据库查询，并将查询结果返回给前端页面。以下是一个示例的Java代码：

public class SearchAction extends ActionSupport {
private String keyword;
public String execute() {
List books = searchBooksByKeyword(keyword);
if (books != null) {
// 将图书信息通过JSON格式返回给前端页面
Map result = new HashMap<>();
result.put("success", true);
result.put("data", books);
return SUCCESS;
} else {
// 返回查询失败的结果
Map result = new HashMap<>();
result.put("success", false);
result.put("message", "未找到相关图书！");
return ERROR;
}
}
// 根据关键字查询图书信息的方法
private List searchBooksByKeyword(String keyword) {
// 进行数据库查询，并返回查询结果
}
}

在上述代码中，我们首先定义了一个execute()方法，它会根据接收到的关键字进行数据库查询。查询成功时，我们将查询结果通过JSON格式返回给前端页面，查询失败时，我们返回一个包含错误信息的JSON对象。这样，前端页面就能根据返回的结果进行相应的处理。

通过以上的实例，我们可以看到，通过Ajax获取Action返回数据库的数据，可以实现动态更新页面内容的效果。这不仅能够提升用户体验，还能减少页面刷新带来的额外请求，降低服务器的负担。