2

I am trying to call following url using get request.

http://localhost:8080/abc/employees

When I opened above url in browser, I am getting following response.

[{"firstName":"Hari Krishna","id":1,"lastName":"Gurram","permAddrees":{"area":"Marthali","city":"Bangalore","country":"India","state":"Karnataka"},"tempAddrees":{"area":"Electronic City","city":"Bangalore","country":"India","state":"Karnataka"}},{"firstName":"PTR","id":2,"lastName":"PTR","permAddrees":{"area":"Bharath Nagar","city":"Hyderabad","country":"India","state":"Andhra Pradesh"},"tempAddrees":{"area":"BTM Layout","city":"Bangalore","country":"India","state":"Karnataka"}}]

Following is my jquery snippet.

<!DOCTYPE html>
<html>
    <head>
        <script src = "jquery-3.1.0.js"></script>
    </head>

    <body>  
        <h1>Click the below button to see the AJAX response</h1>
        <input type="submit" value="click here" id="button1" />

        <div id="placeHolder">

        </div>


        <script type="text/javascript">
            var jq = jQuery.noConflict();

            jq(document).ready(function(){
                jq("#button1").click(function(){
                    alert("Hello");
                    jq.get("http://localhost:8080/abc/employees", function(data, status){
                        alert(data + "" + status);
                        jq("#placeHolder").html(response);
                    });
                });
            });
        </script>
    </body>
</html>

When I click the button, it is showing first alert box 'alert("Hello");', but the alert box in call back function is not executed. Can any one help me to figure out the issue with my code. enter image description here

enter image description here

Hari Krishna
  • 3,658
  • 1
  • 36
  • 57
  • You have `response` in your call, but you're not defining it anywhere - you should be getting an error in console. You're actually making call to `/abc/employees/1` in the screenshot. By any chance is your output different based upon what header the request uses (json / html)? Also - please not use `alert` but `console.log` - `alert` by default stringifies everything, so it's useless in debugging (you still should have a string in Chrome Response tab irregardless) – eithed Aug 17 '16 at 16:50

2 Answers2

1

Short answer

Safari allows it and chrome does not allow (CROSS ORIGIN REQUEST SHARING - CORS).

An experiment :

Let's execute a request from this html file to "www.google.com" from our "localhost".

What happens in chrome ?

In chrome , CORS (CROSS ORIGIN REQUEST SHARING) is not allowed and hence it stops you in doing that.

Chrome gives the error as show below for http://www.google.com

Read about it here...

What happens in Safari ?

Safari allows this behaviour and hence you get this response from http://www.google.com

Proof I have added url as http://www.google.com, and hence this response comes

Community
  • 1
  • 1
cafebabe1991
  • 4,928
  • 2
  • 34
  • 42
0

Looks like you want to access localhost for your file which is not part of locahost

Two things can be done:

  1. Make the file a part of your localhost web application

  2. Make proper CORS settings, for instance is you are using JERSEY use the following.

How to handle CORS using JAX-RS with Jersey

Community
  • 1
  • 1
user3306013
  • 52
  • 4