Ajax post method not called

Question

Ajax is not calling the servlet

My web.xml:

<web-app xmlns="http://java.sun.com/xml/ns/javaee" version="2.5">
    <servlet>
        <servlet-name>LoginServlet</servlet-name>
        <servlet-class>com.web.LoginServlet</servlet-class>
    </servlet> 
    <servlet-mapping>
        <servlet-name>LoginServlet</servlet-name>
        <url-pattern>/LoginServlet</url-pattern>
    </servlet-mapping>
</web-app>

The script:

//function to check name and comment field 
function checkCommentsForm(){
    if(userName.attr("value") && userPass.attr("value"))
    {
        alert("true returned");
        return true;
    }
    else
    {
        alert("fasle returned");
        return false;  
    }
}
//When form submitted
$("#formL").submit(function(){
    if(checkCommentsForm()){
        $.ajax({
            type:"POST",
            url:"/LoginServlet/",
            data:"user="+userName.val()+"&pass="+userPass.val(),
            success: function(msg) {$('#targetDiv').hide();$("#targetDiv").html ("<h3>" + msg + "</h3>").fadeIn("slow");
            }
        });
        alert('ppppppppppppppppp----------');
    }
    else 
        alert("Please fill UserName & Password!");
    return false;
    });
});

The FORM:

<div>
    <form id="formL" name="formL" method="post" onsubmit="return false;">
        <span class="style3"><strong>Enter Username &amp;
            Password to Login : </strong></span><br> <br> <span class="style1">Username :&nbsp;</span>&nbsp;
            <input name="user" id="user" type="text"> <br>
            <span class="style1">Password :</span>&nbsp;&nbsp; <input name="pass" id="pass" type="password"> <br>
            <input name="button" id="button" value="Submit" type="submit">
    </form>
</div>
<div id="targetDiv" style="display: none;"></div>

The alerts are coming as follows:

**The servlet are working but through ajax it was not called any clue what happen ?**

Does the `checkCommentsForm` function show the alert box when it runs? from the example code you've pasted here, using `userName.attr` and `userPass.attr` would throw errors as they're not defined, so your form wouldn't be submit. — steveukx, Feb 24 '13 at 11:07

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Read the HTTP traffic monitor in the "Network" section of your webbrowser's developer toolset (press F12 in Chrome/IE9/Firefox). You should have noticed that the ajax request has returned a HTTP 404 response which is essentially "Page not found" error.

You have namely specified a domain-relative servlet URL by prefixing it with /. Imagine that the JSP is been opened on http://localhost:8080/context/login.jsp, then a servlet URL of /LoginServlet would send the HTTP request to http://localhost:8080/LoginServlet, while you really need it to be sent to http://localhost:8080/context/LoginServlet.

Fix it accordingly:

url: "LoginServlet"

Unrelated to the concrete problem, this whole design is quite strange and not really progressively enhanced. I.e. when the enduser has JS disabled, the whole form doesn't work at all. You should always start with a fully working form without any single line of JavaScript.

Assuming a basic kickoff example as this

<form id="login" action="login" method="post">
    <input type="text" name="user" />
    <input type="password" name="pass" />
    <input type="submit" value="Login" />
    <span id="message">${message}</span>
</form>

then you could enhance in a rather reusable manner as follows:

$("#login").submit(function() {
    var $form = $(this);
    $.post($form.attr("action"), $form.serialize(), function(data) {
        // ...
    });
    return false;
});

Note that $.serialize() transparently serializes all the form data in a proper manner. You were namely not URL-encoding the user/pass request parameters at all which would break the form submit anyway when the enduser uses URL-unsafe special characters in username and/or password.

Ajax post method not called

1 Answers1

See also: