javascript - 如何在 JSP 中订购包含项目的页面

Question

我必须根据价格或名称升序或降序排列产品列表。后端已完成，我只需要发送一个参数，说明从下拉列表中选择了哪个选项。

<!-- Dropdown for ORDER -->
<label for="order" class="control-label">Order by</label>
<select class="form-control" name="order" id="order"  onchange="...">
    <option value="priceAsc" selected>Price: lowest first</option>
    <option value="priceDesc">Price: highest first</option>
    <option value="nameAsc">A - Z</option>
    <option value="nameDesc">Z - A</option>
</select>

在 onchange 上，我尝试了不同的操作，例如 onchange="location=location + '/order/'+ this.options[this.selectedIndex].value;" 并在 Controller 中映射了 /order/{orderBy}" 链接。这种方法的问题是，一旦我点击一个项目，链接就会变成 /products/order/option_here，当我再次点击时，/order/option_here 会再次添加到链接末尾，结果是 /products/order/option_here/order/option_here

我还尝试在 RequestMethod.GET 中获取 order 的值，但没有成功(我相信是因为页面在 GET 方法完成后构造)

我尝试排序的页面称为 /products，那么一旦用户选择了他的选项，我该如何对其进行排序？

这是我在@Controller中映射的方法

@RequestMapping(value = "/order/{orderBy}, method = RequestMethod.GET)
public ModelAndView sortPageBy(@PathVariable String orderBy){
    ModelAndView modelAndView = new ModelAndView("viewProducts");
    List<Product> sortedProducts = productService.orderProducts(orderBy);

    modelAndView.addObject("products", sortedProducts);

    return modelAndView;
}

我们不被允许使用 jQuery。

Answer 1

问题是 location 总是“评估”到当前 url，这是因为 url 总是增加。在您的情况下，最好将订单映射为请求参数。

例如

@RequestMapping(value = "/product", method = RequestMethod.GET)
public ModelAndView sortPageBy(
    @RequestParam("order") String orderBy){
      . . .
}

并且在onchange事件中调用onSubmit