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
– Andreas, Commented Nov 12, 2015 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
– Gabriel, Commented Nov 12, 2015 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 — Andreas
– Andreas, Commented Nov 12, 2015 at 19:06

Andreas · Accepted Answer · 2015-11-12 19:10:07Z

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, 2015 at 19:10

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gabriel Over a year ago

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 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.

Andreas Over a year ago

It would be really helpful if you could also post the error ;-)

Gabriel Over a year ago

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.

Andreas Over a year ago

That's a security feature of Chrome. This will solve the problem: stackoverflow.com/questions/8456538/…

Gabriel Over a year ago

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.

|

Collectives™ on Stack Overflow

Uncaught ReferenceError when calling REST Service using jQuery

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related