AJAX JQuery request doesn't work

Question

I am trying to send an AJAX request through JQuery.

And here is my JQuery code:

$(document).ready(function() {
    $("#login").submit(loginh);

    function loginh() {
        console.log("Sending request");
        var dat = {
            "ucCustomer": {
                "ucLoginRequest": {
                    "customerId": "8a6a7d82392bdaa701392bdabb3a0013",
                    "userName": "0.34705725672258025@mars.com",
                    "password": "23456"
                }
            }
        };
        console.log(JSON.stringify(dat));
        var d = JSON.stringify(dat);

        $.ajax({
            headers: {
                "Content-Type": "application/json",
                "X-Message-Sending-PartnerId": "UNICREDIT",
                "X-Message-Type": "ucCustomerLoginRequest",
                "X-App-UserId": "UNICREDIT",
                "X-App-DeviceFingerPrint": "abc"
            },
            type: "POST",
            url: "http://localhost:8010/UniCreditMobileService/services/ucms/customer",
            data: d,
            success: function(data) {
                alert(data);
                console.log("success: " + data);
            }
        });
    }
});

I have written a JUnit test case in java and this request works fine. Similarly, i have tried sending the request using Dev-HTTP plugin of the chrome browser and it works fine. However, my JQuery code doesn't work.

Nothing happens when i launch the html page. I get no response back. I am using Firebug console to check the reponse received from the server.

Please help me fix the problem.

Answer 1

Try this:

function loginh(event) {
  event.preventDefault();

  // all your codes
}

Where, event is the argument passed to loginh function by submit event and this .preventDefault() will stop the form's default submission behavior which stop the AJAX submission.