谁能指导我如何在 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>
最佳答案
你的路走得很好。
创建一个新操作,它将仅返回 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,则可能是完全不同的代码...)
在简历中,有很多工作要做,而且有很多方法可以做到。 试试吧!
关于java - play 2.0中使用ajax调用jsp/html页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14198065/