Question

所以我正在使用播放框架来制作在线杂货配送系统。我正在尝试使用ajax调用和javascript路径将杂货项目添加到我的购物车。

我看了这个链接并设置了类似的文件： Play 2.x: How to make an AJAX request with a common button

conf.routes：

# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~

# Home page
GET     /                           controllers.Application.index()
GET     /login                      controllers.Application.login()
GET     /logout                     controllers.Application.logout()
POST    /login                      controllers.Application.authenticate()

# User
GET     /signup                      controllers.User.signup()
POST    /signup                      controllers.User.doSignup()

# Other
GET     /food/:cat/:sub             controllers.Application.getFood(cat: String, sub: String)

# Cart
GET     /cart                       controllers.Cart.index()
POST    /cart/checkout              controllers.Cart.checkout()

# Item
POST    /item/addToCart             controllers.Item.addToCart()

GET     /javascriptRoutes           controllers.Application.javascriptRoutes()

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file               controllers.Assets.at(path="/public", file)

Javascript路由器：

public static Result javascriptRoutes(){
        response().setContentType("text/javascript");
        return ok(
            Routes.javascriptRouter("myJsRoutes",
                routes.javascript.Item.addToCart()

            )
        );
    }

products.scala.html：

@(product: Product)

<li data-task-id="@product.id">
    <img src="@product.imageUrl" alt="No Image Available">

    <h2>@product.name</h2>

    <!-- Price Display -->
    @if(product.price != 0.0){
        <span class="product-price">@product.price</span>
        <p>
            <form id="addToCart">
                <input hidden="true" id="prodcutId" type="text" value="@product.id"/>
                Qty: <input id="qty" type="text" id="cart" value="1"/>
                <input id="addSubmit" type="submit" value="Add To Cart"/>
            </form>
        </p>
    }
    @if(product.price == 0.0){
        <span class="available-in-store">Only Available in Store</span>
    }
</li>

web / public / main / javascripts中的Javascript文件：

$("#addSubmit").click(function(e) {

    var qty = $("#qty").val()
    var product = $("#productId").val()
    var json = new Object();
    json.productId = productId;
    json.quantity = qty;

    myJsRoutes.controllers.Item.addToCart().ajax({
        type : "POST",
        data : json,
        success : function(data){alert("Your Item was added to the Cart")};

    });
});

处理POST调用的操作：

@Security.Authenticated(Secured.class)
public class Item extends Controller {

    public static Result addToCart(){
        Customer currCustomer = Customer.find.where().eq("email", session().get("email")).findUnique();
        System.out.println(request().body().asFormUrlEncoded());
        //int quantity = jsonPost.get("qty").asInt();
        //String productId = jsonPost.get("productId").asText();
        //Product product = Product.find.byId(productId);
        //ShoppingCart cart = new ShoppingCart(currCustomer, product, quantity);
        //cart.save();
        //currCustomer.shoppingCartList.add(cart);
        return null;
    }



}

main.scala.html我将脚本路由器放在头部：

@(walmartCategories: List[Category],  amazonCategories: List[Category], user: Customer)(body: Html)

<html>
    <head>
        <title>Banana Now</title>
        <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
        <link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/dropmenu.css")">
        <link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/search.css")">
        <script type="text/javascript" src="@routes.Assets.at("javascripts/jquery-1.7.1.js")"></script>
        <script type="text/javascript" src='@routes.Application.javascriptRoutes()'></script>
    </head>
    <body>
        <header>
            <a href="@routes.Application.index" id="logo"><span>Banana</span>Now</a>


            <section class="webdesigntuts-workshop">
                <form action="" method="">
                    <input type="search" placeholder="Search...">
                    <select id="search_select">
                        <option value="all">Entire Site</option>
                    </select>
                    <button>Search</button>
                </form>
            </section>

            <dl id="user">

                @if(user != null){
                    <dt>@user.name <span>(@user.email)</span></dt>
                    <dd>
                        <a href="@routes.Application.logout()">Logout</a>
                    </dd>
                }
                @if(user == null){
                    <dd>
                        <a href="@routes.Application.login()">Login</a>
                    </dd>
                }
                <dd>
                    <a href="@routes.Cart.index()">Cart</a>
                </dd>
            </dl>

        </header>

        <nav>
            <h4 class="dashboard"><a href="#/">Walmart</a></h4>
                @walmartCategories.groupBy(_.mainCategory).map {
                    case (group, subcategories) => {
                        @views.html.categories.group(group, subcategories)
                    }
                }
            <h4 class="dashboard"><a href="#/">Amazon Fresh</a></h4>
                @amazonCategories.groupBy(_.mainCategory).map {
                    case (group, subcategories) => {
                        @views.html.categories.group(group, subcategories)
                    }
                }
        </nav>
        <script type="text/javascript" src="@routes.Assets.at("javascripts/dropdown.js")"></script>
        <section id="main">
            @body
        </section>
    </body>
</html>

有人能指出我正确的方向吗？目前，当我单击“添加到购物车”按钮时，它只对该项目执行获取请求。

如何使用Jquery和Javascript路由执行Ajax调用Play框架

0 个答案: