java - play 2.0中使用ajax调用jsp/html页面

Question

谁能指导我如何在 play 框架中使用 ajax 调用 jsp/html 页面？

我想通过单击按钮打开一个灯箱，并希望加载包含数据库数据的页面。目前我刚刚使用ajax 显示了该消息。下面是Application.java中的方法

public static Result index()
  {
    return ok(index.render("Your new application is ready."));
  }

我的index.scala.html是:

@(products: List[Products])

@import helper._
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<h1>@products.size() product(s)</h1>
<table border=1>
<tr>
<td>Product Name</td>
<td>Quantity</td>
<td>Price</td>
</tr>
@for(product <- products) {
    <tr>
        <td>
            @product.productname
        </td>
        <td>
            @product.quantity
        </td>
        <td>        
            @product.price
        </td>
        <td id="items">        

            <a href="@routes.Application.user(product.product_id)"><input type="button" value="Add Product" name="@routes.Application.user(product.product_id)" id="but"/></a>

        </td>
    </tr>
}
</table>


<div class="result1" style="border: 1px solid black; padding: 5px;">not sent yet...</div>


<script type="text/javascript">
    jQuery("#items a").click(
            function () {
                $.get(jQuery(this).attr("href"), function (data) {
                    $('.result').html(data);
                });
                return false;
            }
    )
</script>

Answer 1

你的路走得很好。

创建一个新操作，它将仅返回 div 中所需的 html(而不是完整的 html 页面)。

public static Result detail(Integer productId)
{
    Product product = .... (productId);
    return ok(productDetail.render(product));
}
// with the route of course

productDetail.scala.html

@(product: Product)

My product @product.product_id is beautiful !
....

您还必须添加一个 jquery 插件来显示您的灯箱(有一千个......)

你的 JsCode 将是这样的:

$("#items a").click(function () {
   $("#result").load($(this).attr("href"), function() {
      displayPopup(); // code this
   });
});

(或者如果插件本身处理ajax，则可能是完全不同的代码...)

在简历中，有很多工作要做，而且有很多方法可以做到。试试吧!