如何使用 EL 将 AJAX 返回的列表设置为页面上的列表引用

Question

我有一个 JSP 页面，这是第一次使用项目列表调用。在下拉列表 (select) 的 selection 上，我正在触发 AJAX 代码以获取特定于选项 selected 的产品，我想用更多相关产品。

有没有办法可以将它设置为“${products}”，或者我是否必须使用另一种方法，例如隐藏 div 标签并显示另一个标签。

我的 JSP 页面

<div>
  <c:forEach var="p" items="${products}">
    <table>
      <td>p.name</td>
      <td>p.description</td>
    </table>
  </c:forEach>
<div>

我的脚本

// Ajax...
success: function(result) {
  if (result.length > 0) {
    // want to set the products list with the list returned
  }
}

我的控制器

public List<Product> MyController() {
  // ...
  List<Product> products = prodcat.getList()
  return products
}

Answer 1

有两种方法可以解决您的问题，但首先您应该知道 JSP 和 el 都是服务器端技术，这意味着它们在服务器端执行以生成HTML 发送到客户端以在浏览器中呈现的响应，因此在您的情况下，一旦产品 table 首次在客户端呈现，您将不得不使用一些 JavaScript 在客户端执行的代码 remove/substitute 那 table content

所以第一种方法 是将 table 放在单独的 JSP 文件中（例如，products_view.jsp 和而不是 returning products 对象，你 return ModelAndView 来自控制器方法的对象：

控制器

@RequestMapping( method=RequestMethod.GET, value="/products_view" )
public ModelAndView MyController() {
  // ...
  List<Product> products = prodcat.getList();
  model.addAttribute( "products", products );
  return new ModelAndView( "products_view" );
}

products_view.jsp

<div id="products_table">
  <table>
    <c:forEach var="p" items="${products}">
      <tr> 
        <td>p.name</td>
        <td>p.description</td>
      </tr>
    </c:forEach>
  </table>
<div>

AJAX

// Ajax...
success: function(result) {
  if (result.length > 0) {
    $("#products_table").html( response );
  }
}

另一种方法 是你 return 来自你的控制器的那个产品列表的 JSON 或 XML 响应，然后你填充JSON 在客户端对你的 table 的响应，确保你的依赖项列表中有 Jackson 罐子

控制器

@RequestMapping( method=RequestMethod.GET, value="/products_view", produces="application/json" )
public @ResponseBody List<Product> MyController()
  // ...
  List<Product> products = prodcat.getList();
  return products ;
}

AJAX

// Ajax...
dataType: "json",
success: function(result) {
  if (result.length > 0) {
    var productTableHTML = '<table>';
    $.each(response, function (key,value) {
      productTableHTML += 
        '<tr><td>' + key + '</td><td>' + value + '</td></tr>';     
    });
    productTableHTML += '</table>';
    $("#products_table").html( productTableHTML );
  }
}

Answer 2

感谢您的回复，让我告诉您我的方法。我使用了 AJAX Jackson 并试图将产品列表传递给 view.I 在我的产品（一个）和评级（许多）之间隐式地进行对象转换时有一个双向映射，它进入了一个无限循环，因为它正在寻找产品评级和产品评级。我创建了另一个模型 class 并只设置了我需要的产品属性 class 而不是发送产品列表。 所以最后我只是覆盖了 div标记我收到的新元素。

如何使用 EL 将 AJAX 返回的列表设置为页面上的列表引用

How to set a list returned by AJAX to a list reference on the page using EL

ajax

jquery

spring

el