AJAX call in JQuery giving an error

Question

I am attaching the project which I am executing, but it always goes to the error function.

Why is it doing this?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="jquery-ui.css">
    <script src="jquery-1.10.2.js"></script>
    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
      $(function() {
          $("#tags").autocomplete({
              source: function (request, response) {
                  $.ajax({
                      url: "test",
                      dataType: "json",
                      success: function(response) {
                          alert("a");
                          console.log(response);
                      },
                      error: function(response) {
                        alert("b");
                          console.log(response);
                      }
                  });
              }
          });
      });
    </script>
  </head>
  <body>
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags">
    </div>
  </body>
</html>

My JSON file, named test.json, contains:

[{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},
{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},
{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}]

Are you sure the `"test"` URL you specify points to a valid resource? — Frédéric Hamidi, Sep 17 '14 at 15:46
This is a server side problem. The `error` handler is only called if the HTTP response is anything *other* than `200 OK`. Check your server side code (assuming there even is any, as 'test' is not a valid url) — Rory McCrossan, Sep 17 '14 at 15:54
Please edit your question to answer our questions if you have not enought reputation — Fractaliste, Sep 17 '14 at 15:57
just change your url to test.json (url: "test.json") - you need to include the file extension — Birgit Martinelle, Sep 17 '14 at 16:10

score 1 · Answer 1 · answered Sep 24 '14 at 21:07

1

Url should be "test.json", because you are getting static file. You don't send request to valid server URL.

answered Sep 24 '14 at 21:07

Nodarii

934
7
21

score 0 · Answer 2 · answered Sep 24 '14 at 22:36

It has to be an actual file that you're trying to grab from the url: test will not give you anything back unless in the backend you have some mechanism thats giving you a JSON response, dataType: JSON

The file in the url can be anything. something.json or test.php, test.asp, test.jsp whatever the case is you need to specify a file that has the actual JSON

good answer Birgit Martinelle. that would be my first instinct.

score 0 · Answer 3 · edited May 23 '17 at 11:44

You can make AJAX calls to a backend API, it needs to return JSONP format and not just JSON, otherwise you get and error. This is due to same origin policy: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy.

This discussion may be helpful to understand JSONP:

Can anyone explain what JSONP is, in layman terms?

However, one alternative is disable the security of Google Chrome browser, then it will work. But this is not a solution. You need to use JSONP format.

So its better to make your JSon File something like this, that is JSonP format

myCallback([{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},
{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},
{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}]);

hope this helps you with your problem

AJAX call in JQuery giving an error

3 Answers3