Why does my Jquery Ajax call fail with error 0?

Question

I am trying to send an ajax request using the below code but I keep getting an Error 0 message. I am pretty sure the url is valid but I just wondered if the code is ok as I am trying this for the first time, altering a template provided by a tutor. Any advice gratefully received.

     $('#submitOne').click(function() {

       $.ajax({
         url: "http://localhost/alistairJenkins/task/php/getCountryCode.php",
         type: 'POST',
         dataType: 'json',
         data: {
             lat: $('#latOne').val(),
             lng: $('#lngOne').val()
         }})
        .done(function(result) {

             console.log(result);

             if (result.status.name == "ok") {
                 $('#txtResult').html(result['data']);
             }
         })
        .fail(function(jqXHR, textStatus, errorThrown) {
                 var errorMsg = jqXHR.status + ' : ' + textStatus + errorThrown;
                 alert("Error - " + errorMsg);
         })
      })

You're likely getting a CORS error. Review the console and network tabs in developer tools. — Heretic Monkey, Oct 12 '21 at 16:33
@HereticMonkey You're right. No 'Access-Control-Allow-Origin' header is present on the requested resource. So how do I fix that - adding something in my Jquery - or adding something in the php file its sending the request to? — Alistair Jenkins, Oct 14 '21 at 14:47
@HereticMonkey - figured out how to add the header in my php file. Thanks for getting me past that hurdle. Now to tackle the new error I am getting! If you could add this as an answer so I can accept it and close the question that would be good. — Alistair Jenkins, Oct 14 '21 at 15:32
Does this answer your question? [Why is AJAX returning HTTP status code 0?](https://stackoverflow.com/questions/2000609/why-is-ajax-returning-http-status-code-0) — Heretic Monkey, Oct 14 '21 at 18:30
Didn't figure you were the first to ask, or I was the first to answer :). You can see the answer in [this specific answer](https://stackoverflow.com/a/2016085/215552), where it mentions "cross-site scripting"; it refers to CORS in the comments as well. — Heretic Monkey, Oct 14 '21 at 18:34

Carsten Massmann · Answer 1 · 2021-10-12T16:41:48.783

Here is a working snippet that demonstrates the use of $.ajax() with a public JSON resource:

$('#submitOne').click(function() {

       $.ajax({
         // url: "http://localhost/alistairJenkins/task/php/getCountryCode.php",
         url: "https://jsonplaceholder.typicode.com/users",
         type: 'POST',
         dataType: 'json',
         data: {
             lat: $('#latOne').val(),
             lng: $('#lngOne').val()
         }}) 
        .done(function(result, textStatus, xhr) {

             console.log(result);

             if (xhr.status===201) $('#txtResult').text(result.id);
         })
        .fail(function(jqXHR, textStatus, errorThrown) {
                 var errorMsg = jqXHR.status + ' : ' + textStatus + errorThrown;
                 alert("Error - " + errorMsg);
         }) 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="latOne" value="52.373920">  <input id="lngOne" value="9.735603"> 
<button id="submitOne">go</button><br>
<div id="txtResult"></div>

The .status property can be found in the xhr object (the third argument of the callback function in the .done() event handler). The value 201 signals success.

Why does my Jquery Ajax call fail with error 0?

1 Answers1