Spring MVC Beitrag ohne Aktualisierung Seite

Question

Ich habe eine Seite mit einem Menü. Jede Schaltfläche im Menü ist ein leeres Formular mit einer bestimmten URL.

<form method="post" class="menu-form vote" action="/waiter/order/2/menu?product=Crown%20Royale"> 
           <button type="submit" class="btn btn-success btn-lg">Crown Royale</button> 
          </form> 
          <form method="post" class="menu-form vote" action="/waiter/order/2/menu?product=Glenkinchie"> 
           <button type="submit" class="btn btn-success btn-lg">Glenkinchie</button> 
          </form> 

Es funktioniert. Durch Drücken der Abfrage wird der Controller aufgerufen und in der Datenbank gespeichert.

@RequestMapping(value = "waiter/order/{id}/menu", method = RequestMethod.POST) 
public void addoToOrder(@PathVariable("id") long id, 
            @RequestParam("product") String product) { 
    orderDetailService.addOrderDetail(id, product); 
} 

Ich muss diese Seite nicht nach jedem Drücken neu geladen werden. Ich habe versucht, etwas in der Gestalt des

<script type="text/javascript"> 
$(function() { 

    $('.vote').on('submit', function() { 
     return false; 
    }); 

}); 

Aber es hat nicht funktioniert. Die Anfrage kommt, aber die Seite wird weiß.

Answer 1

Sie können eine AJAX-Anfrage senden, damit die Seite nicht aktualisiert wird. Sie haben jQuery bereits integriert, sodass Sie die Methoden $.post oder $.ajax verwenden können.

Entfernen Sie die Formulare und fügen onclick auf Tasten stattdessen wie folgt aus:

<button class="btn btn-success btn-lg" onclick="$.post('/waiter/order/2/menu?product=Crown%20Royale')">Crown Royale</button> 
<button class="btn btn-success btn-lg" onclick="$.post('/waiter/order/2/menu?product=Glenkinchie')">Glenkinchie</button>