播放框架-Ajax调用

Question

I am facing issue to make an ajax call. Javascript method del is getting called, but no ajax call is happening. Here is my code:

list.scala.html

@(products: List[Product])
@main("Products catalogue") {
    <h2>All products</h2>
    <script>
    function del(urlToDelete) {
        alert("In Ajax");
        $.ajax({
            url: urlToDelete,
            type: 'DELETE',
            success: function(results) {
                // Refresh the page
                //location.reload();
            },
            error : function(results) {
                alert('Make call failed');
            }
        });
        alert("End Ajax");
    }
    </script>
    <table class="table table-striped">
    <thead>
        <tr>
            <th>EAN</th>
            <th>Name</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        @for(product <- products) {
            <tr>
                <td><a href="@routes.Products.details(product.ean)">
                    @product.ean
                </a></td>
                <td><a href="@routes.Products.details(product.ean)">
                    @product.name</a></td>
                <td>
                <ahref="@routes.Products.details(product.ean)">@product.name</i></a>
                <button onclick="del('@routes.Products.delete(product.ean)')" >del</button>
                </td>
            </tr>
        }
    </tbody>
    </table>
}

routes

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

# An example controller showing a sample home page
GET     /                           controllers.HomeController.index
# An example controller showing how to use dependency injection
GET     /count                      controllers.CountController.count
# An example controller showing how to write asynchronous code
GET     /message                    controllers.AsyncController.message

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

GET     /hello                      controllers.HomeController.hello(name: String)

GET     /products                   controllers.Products.list()
GET     /products/new               controllers.Products.newProduct()
GET     /products/:ean              controllers.Products.details(ean: String)
POST    /products                   controllers.Products.save()

DELETE /products/:ean               controllers.Products.delete(ean: String)

Controller Products.java

public class Products extends Controller {
...
public Result delete(String ean) {
    logger.info("delete product");
    final Product product = Product.findByEan(ean);
    if(product == null) {
        return notFound(String.format("Product %s does not exists.", ean));
    }
    Product.remove(product);
    return redirect(routes.Products.list());
}
...
}

I am not getting any error, and my browser is not showing any error. first alert("In Ajax") in javascript is popping up, not the second alert("End Ajax"), log in controller("Products.java") is not logged(in console or log file). I guess ajax call is not initiated, but i am not sure what I am missing.

Thanks in advance for your time and help.

Answer 1

In my opinion, you need map your ajax call with your delete() method. Like that At your Ajax

 $.ajax({
        url: /urlToDelete,
        type: 'DELETE',
        success: function(results) {
            // Refresh the page
            //location.reload();
        },
        error : function(results) {
            alert('Make call failed');
        }
    });

And in your routes

# Routes
GET     /urlToDelete                           controllers.Products.delete()  

So method delete() will be calling. I hope this can help you.