Java实现ajax提交form表单实现根据时间搜索订单

要实现ajax提交form表单实现根据时间搜索订单，可以按照以下步骤进行：

1. 在前端页面中编写一个表单，包含开始时间和结束时间的输入框，以及一个提交按钮。

2. 使用JavaScript获取表单中的数据，将其封装成一个对象。

3. 使用ajax发送POST请求，将表单数据作为请求参数发送到后端。

4. 在后端接收到请求后，根据表单数据查询数据库，将查询结果返回给前端。

5. 前端接收到响应后，使用JavaScript将查询结果渲染到页面上。

下面是一个简单的示例代码：

前端页面：

<form id="search-form">
  开始时间：<input type="text" name="start_time" id="start-time">
  结束时间：<input type="text" name="end_time" id="end-time">
  <button type="submit">搜索</button>
</form>

<div id="search-result"></div>

<script>
  var searchForm = document.getElementById('search-form');
  var searchResult = document.getElementById('search-result');

  searchForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    var startTime = document.getElementById('start-time').value;
    var endTime = document.getElementById('end-time').value;

    var formData = {
      start_time: startTime,
      end_time: endTime
    };

    // 发送ajax请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/search');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          // 查询成功，渲染查询结果
          searchResult.innerHTML = xhr.responseText;
        } else {
          // 查询失败，提示错误信息
          searchResult.innerHTML = '查询失败：' + xhr.statusText;
        }
      }
    };
    xhr.send(JSON.stringify(formData));
  });
</script>

后端Java代码：

@Controller
public class OrderController {
  @Autowired
  private OrderService orderService;

  @PostMapping("/search")
  @ResponseBody
  public String searchOrders(@RequestBody Map<String, String> form) {
    String startTime = form.get("start_time");
    String endTime = form.get("end_time");

    List<Order> orders = orderService.searchOrders(startTime, endTime);

    // 将查询结果渲染成HTML代码
    StringBuilder sb = new StringBuilder();
    sb.append("<table>");
    sb.append("<tr><th>订单号</th><th>下单时间</th><th>金额</th></tr>");
    for (Order order : orders) {
      sb.append("<tr>");
      sb.append("<td>").append(order.getOrderNo()).append("</td>");
      sb.append("<td>").append(order.getCreateTime()).append("</td>");
      sb.append("<td>").append(order.getAmount()).append("</td>");
      sb.append("</tr>");
    }
    sb.append("</table>");

    return sb.toString();
  }
}

注意事项：

1. 在发送ajax请求时，需要设置请求头Content-Type为application/json，以便后端能够正确解析请求参数。

2. 在后端接收请求参数时，需要使用@RequestBody注解将请求参数映射为Map<String, String>类型。