如何在使用Spring MVC时重新加载HTML表格而不刷新整个页面

Question

我正在使用Spring MVC和Javascript编写example.jsp文件。

我已经被这个问题卡了很久。

是否有可能在不刷新整个页面的情况下，使用Javascript从数据库加载新数据到HTML表格中？

我只是不希望在某些事件加载新数据到表格时整个页面被替换。

- Narayan

---

是的，它是的。你尝试了什么？ - sp00m

我在桌面端使用Java和Spring工作了3年，现在才刚开始涉足Web领域一个月，所以我还没有尝试过太多的sP00m。我在网上查看了大约30-40个链接，但没有找到关于Spring MVC的有用信息。 - Narayan

Answer 1

如果您想使用JavaScript重新加载页面的部分，基本上需要使用AJAX。
以下是应该执行的操作。

客户端

假设您正在使用jQuery作为JavaScript框架。
您需要在客户端使用jQuery.ajax()。

var successHandler = function( data, textStatus, jqXHR ) {
  // After success reload table with JavaScript
  // based on data...
};

var errorHandler = function( jqXHR, textStatus, errorThrown ) {
  // Error handler. AJAX request failed.
  // 404 or KO from server...
  alert('Something bad happened while reloading the table.');
};

var reloadData = function() { 
  // Process your request
  var request = new Object();
  request.id = 'some id'; // some data

  // Make the AJAX call
  jQuery.ajax({
    type       : 'POST',
    url        : 'http://domain/context/reload-data-url',
    contentType: 'application/json',
    data       : JSON.stringify(request)
    success    : successHandler,
    error      : errorHandler
  });
};

当您需要重新加载表格时，请调用reloadData()函数。

服务器端

您正在使用Spring MVC。那么您的控制器应该如下所示：

 // Spring MVC Controller
 @Controller
 public class ReloadDataController {

   // Request Mapping
   @RequestMapping(value = '/reload-data-url', method = RequestMethod.POST)
   @ResponseBody
   public ResponseEntity<String> processReloadData(@RequestBody String body) {

     // Get your request
     JSONObject request = new JSONObject(body);
     String id = request.getString("id"); // Here the value is 'some id'

     // Get the new data in a JSONObject
     JSONObject response = new JSONObject();
     // build the response...

     // Send the response back to your client
     HttpHeaders headers = new HttpHeaders();
     headers.add("Content-Type", "application/json; charset=utf-8");
     return new ResponseEntity<String>(response.toString(),
                headers, HttpStatus.OK);
   }

 }

你不一定要使用JSON，但我认为这是最好的方式。希望这能帮到你。

- Florian Parain

Answer 2

我也曾经遇到过这个问题，后来我终于找到了这个解决方案，它使用了ModelAndView。请看一下这个解决方案，它可能有用：无需重新加载页面更新Thymeleaf表格。

虽然我的回答有些晚了，但也许对某些人会有所帮助......

- LuLuLaLaLa

---

请将以下与编程有关的内容从英语翻译为中文。仅返回翻译后的文本：请在例子或某种代码中包括示例，而不仅是链接到外部资源，因为这些资源可能会更改或消失。 - Nielsvh

你的回答可以通过添加更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community