How to return a value in ajax from a Java Rest Web service?

Question

I have a web application with HTML and JQuery, in which it has a login form. When I click the submit button I am using ajax to send the data using Post request to a web service. The web service is built with Java.

Here is my html form:

<form id="mdxLogin" action="" method="post">
    <div class="ui-content">
            <p><input type="email" id="mdxEmail" name="mdxEmail" class="ui-field-contain" value="" placeholder="MDX Email" /> </p>
            <p><input type="password" id="mdxPassword" name="mdxPassword" class="ui-field-contain" value="" placeholder="MDX Password" /></p>
    </div>
    <div class="ui-content">
            <input type="submit" class="ui-field-contain" value="Login" id="sub"/>
    </div>
</form>

The below is my Ajax code to post to my web service

$("#mdxLogin").submit(function(e) {
    e.preventDefault();
    var mdxEmail = $("input[name=\"mdxEmail\"]").val();
    var mdxPassword = $("input[name=\"mdxPassword\"]").val();

    $.ajax({
        type: "POST",
        url:"http://localhost:8080/RestService/rest/loginService/login",
        dataType:"json",
        data: $("#mdxLogin").serialize(),
        success: function(data, textStatus, jqXHR) {
            // handle your successful response here
            alert(data);
        },
        error: function(xhr, ajaxOptions, thrownError) {
            // handle your fail response here
            alert("Error");
        }
    }); 

})

And the below is the method in my web service

@POST
@Path("/login")
@Produces(MediaType.TEXT_PLAIN)
public String login(@FormParam("mdxEmail") String mdxEmail, @FormParam("mdxPassword") String mdxPassword) {
  System.out.println(mdxEmail);
  DBStudent s = new DBStudent();
  String url = null;

  if (s.checkLogin(mdxEmail, mdxPassword)) {
      url = s.getCalendar(mdxEmail, mdxPassword);
  }

  return url;
 }

So far what I managed to do is to post the data to my web service but didn't get any response. My question is how can I access the returned url from my web service with Ajax?

First, run the JS code with Firebug (or equivalent) open. What does it send? (You can post the data here - the sent data, the response HTTP code, the response body, the request and response headers, especially the `Accepts:`.) — Nikos Paraskevopoulos, Mar 16 '14 at 11:14
Basically this sends the login details to the web service. Then the web service validates the login, and according to the login the web service should return a url string (I don't know how to do the last part) — Jonathan Mallia, Mar 16 '14 at 11:51
What are you seeing as response body in Firebug when making this call? (Generally your code looks OK, there is probably some detail missing.) Also - did you try producing another media type? — Nikos Paraskevopoulos, Mar 16 '14 at 12:39
I have never used Firebug so far, maybe I should give it a try. But what I have noticed is that when I submit my form, the error block in my ajax is executed. Also I noticed that after I submit the form, the console in chrome gives me this error `XMLHttpRequest cannot load http://localhost:8080/RestService/rest/loginService/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. ` — Jonathan Mallia, Mar 16 '14 at 13:34
I tried using Firebug just now, as a response I am getting the whole HTML document — Jonathan Mallia, Mar 16 '14 at 13:45
OK, you are calling `http://localhost:8080/RestService/rest/loginService/login`. What is the address of the page that calls this? It seems to be different than `http://localhost:8080/` (if even the port number, 8080, is different, your problem is the same origin policy, enforced by the browser; google it and you will get solutions, involving the `Access-Control-Allow-Origin` hinted by Chrome) — Nikos Paraskevopoulos, Mar 16 '14 at 16:26
Yes you're right the page that contains the login form is hosted in local host using WampServer and the Web service is hosted using Tomcat. I don't know if it's the best approach. What I am aiming for is to have a web application written in html and JQuery that can talk to Java to get information according to the login credentials. — Jonathan Mallia, Mar 16 '14 at 16:41
You can always use Apache as proxy, so that for the browser both the HTML and the services seem to listen to the same port. Then, Apache serves the static stuff itself, while forwarding the dynamic stuff to Tomcat. The configuration is easy actually, and there are lots of resources on how to do it. — Nikos Paraskevopoulos, Mar 16 '14 at 20:30
Do you have any suggestions on where I can start? Because this is the first time that I am using tomcat as a server and I am still a bit green. — Jonathan Mallia, Mar 17 '14 at 10:33
Google something like "setup apache as proxy to tomcat". A result is [this](http://wiki.apache.org/httpd/TomcatReverseProxy) and seems sufficient. **Make sure you setup a test environment with a simple 1 JSP project and experiment on that first.** This way you will be confident that you will not be messing things up in the real thing. Additionally the complexities of the real application will not interfere with the process. — Nikos Paraskevopoulos, Mar 17 '14 at 10:37
I followed the tutorial you sent me and I managed to make the proxy to localhost:8080 but I still have the same problem. Ajax is sending the login details to tomcat but no response is coming back. In the response tab I am getting the whole html document. Also error block is being executed — Jonathan Mallia, Mar 17 '14 at 15:18

score 0 · Answer 1 · edited May 23 '17 at 12:30

In your code I spot one error which should prevent it to work properly. In the client side you're saying to jQuery that the expected type is JSON, but the server produces a string, in your case a URL, which is not JSON. Therefore jQuery when tries to parse the data received fails because it's not JSON data. This mistake should trigger the jQuery error block.

Apply just this change in the client:

dataType:"text"

If you want to test your code without worrying about the Same Origin Policy you can disable it, look at these threads

Disable firefox same origin policy

Disable same origin policy in Chrome

How to return a value in ajax from a Java Rest Web service?

1 Answers1