Uncaught ReferenceError when calling REST Service using jQuery

Question

I'm really new in web services, so I would appreciate any help here. I have created a RESTful web service using Spring-boot. The code for my web service is simple as I'm just testing:

@RestController
public class MainController {   
    @RequestMapping("/test")
    public String getStringTest(@RequestParam(value="name", defaultValue="Test") String name){
        System.out.println("Name received: " + name);
        return "HelloTest: " + name;
    }
}

After deploying the web service, I'm able to access it using: http://localhost:8080/imagesTest and I get the "HelloTest" string in my browser, so it's working fine. But the problem is when When I try to access it using jQuery in a web page it's not working. This is the page:

<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 </head>
 <body>
  <p id="info"></p>
 </body>
</html>
<script>
 $(document).ready(function(){

    $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        url: "http://localhost:8080/test?name=Gabriel",
        success: function(data){
            alert("Success: " + data);
        },
        error: function(){
            alert("Something went wrong.");
        }
    });

 })
</script>

When I execute my page, I get the following error message in the console:

Uncaught ReferenceError: HelloTest is not defined(anonymous function) @ imagesTest?callback=jQuery1113027941066049970686_1447350578572&_=1447350578573:1

Any help on this would be very much appreciated so I can understand what's really going on.

Thank you in advance for your help.

You're telling jQuery that the ajax request has to expect executable Javascript but you're returning the string `"HelloTest: Gabriel"` — Andreas, Nov 12 '15 at 18:12
Thank you Andreas. Kindly, could you please be more specific? I'm new into web services. So you're saying that I can not expect to catch the string in the "data" variable in the success function? I'm not very familiar into this, sorry. — Gabriel, Nov 12 '15 at 19:04
Change the `dataType` property to a more suitable value. In this case I would go with `"text"` or remove it completely. For a list of possible values see the [api documentation](http://api.jquery.com/jquery.ajax/) — Andreas, Nov 12 '15 at 19:06

score 1 · Accepted Answer · answered Nov 12 '15 at 19:10

1

dataType: 'jsonp' tells jQuery to expect JSONP, but your returning a plain string "HelloTest: Gabriel"

Change the dataType to something more suitable, such as "text" (or remove it completely)

$.ajax({
    type: 'GET',
    dataType: 'text',
    url: "http://localhost:8080/test?name=Gabriel",
    success: function(data){
        alert("Success: " + data);
    },
    error: function(){
        alert("Something went wrong.");
    }
});

The possible values are listed in the api documentation of the $.ajax method

answered Nov 12 '15 at 19:10

Andreas

21,535
7
47
56

Thank you Andres. I have tried with both options, removing it and also using the example you posted. Now I'm getting a different error: XMLHttpRequest cannot load http://localhost:8080/test?name=Gabriel. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. Can you please advice on this? Thanks again. – Gabriel Nov 12 '15 at 19:50
It would be really helpful if you could also post the error ;-) – Andreas Nov 12 '15 at 19:52
Thanks Andreas. This is the only error appearing in my browser, I'm using Google Chrome as my browser. This is the error: "XMLHttpRequest cannot load localhost:8080/test?name=Gabriel. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. ". I really have no idea what would be the problem. I also updated the question with my full Java code if that works. – Gabriel Nov 12 '15 at 20:22
That's a security feature of Chrome. This will solve the problem: http://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin – Andreas Nov 12 '15 at 20:25
Thank you Andreas. You're right, that's a problem from Chrome. I tested my code using IE 11 and it's working fine. You solved my problem completely. Thanks. – Gabriel Nov 12 '15 at 20:57
You're welcome :-) Don't forget to mark the answer which solved the problem to mark the question as "solved" – Andreas Nov 12 '15 at 21:06

Uncaught ReferenceError when calling REST Service using jQuery

1 Answers1