Ajax call error in Spring MVC

Question

I have a form where I add the customer's informations. This informations are passed to @Controller by an Ajax call.

Customer.java

public class Customer {

private String name;
private String fiscalCode;
private String vat;
private String telephone;
private String webSite;
private String sector;
private String address;

//Below there are constructor and getter/setter methods

Above the form there is:

<c:set var="serverUrl"    value="${pageContext.servletContext.contextPath}"/>
<script>
    var serverUrl = '${serverUrl}';
</script>

Form in the jsp

<form>                        
    <div class="form-group">
        <input id="nameCustomer" class="form-control" type="text"     placeholder="Name customer">
    </div>
    <div class="form-group">                                
        <input id="fiscalCode" class="form-control" type="text" placeholder="Fiscal code">
    </div>
    <div class="form-group">
        <input id="vat" class="form-control" type="number" placeholder="VAT number (if available)">
    </div>
    <div class="form-group">
        <input id="telephone" class="form-control" type="tel" placeholder="Phone number">
    </div>
    <div class="form-group">
        <input id="website" class="form-control" type="email" placeholder="Customer's Website (if available)">
    </div>
    <div class="form-group">
         <input id="address" class="form-control" type="text" placeholder="Customer's Address">
     </div>
     <div class="form-group">
         <input id="sector" class="form-control" type="text" placeholder="Sector">
     </div>
     <button id="createCustomer" type="button" class="btn btn-success" style="text-align: center">Save</button>                        
 </form>

Ajax call (the link to this ajax call code is below the form)

$("#createCustomer").click(function () {
    alert("createCustomer");
    alert(serverUrl);
    var nameCustomer = $("#nameCustomer").val();
    var fiscalCode = $("#fiscalCode").val();
    var vat = $("#vat").val();
    var telephone = $("#telephone").val();
    var website = $("#website").val();
    var address = $("#address").val();
    var sector = $("#sector").val();

    alert(address);
    $.ajax({
        url: serverUrl + "/addCustomer",
        dataType: 'text',
        data: {name: nameCustomer, 
               fiscalCode: fiscalCode, 
               vat: vat, 
               telephone: telephone,
               webSite: website,
               address: address,
               sector: sector},
        success: function (data) {
            $("#customerAdded").modal('show');                
        },
        error: function (xhr, error, exception) {
            $("#errorCustomer").modal('show');

        }
    });
});

Controller

@Controller
public class CustomerController {

@RequestMapping("addCustomer")
public void addCustomer(@ModelAttribute Customer customer){
    JOptionPane.showMessageDialog(null, customer.toString());
}

Chrome gives me this error:

http://localhost:8080/ReportVisitaWeb/addCustomer?name=gdg&fiscalCode=dfgdfg&vat=&telephone=dfgg&webSite=dfggf&address=dfgddf&sector=gdg Failed to load resource: the server responded with a status of 404 (Not Found)

Why?

Answer 1

You are not mapping the request "addCustomer" correctly. Edit your CustomerController as below:

@Controller
public class CustomerController {
            @RequestMapping("/addCustomer")
            public void addCustomer(@ModelAttribute Customer customer){
                JOptionPane.showMessageDialog(null, customer.toString());
            }
}