jQuery ajax function returns an error

Question

to be honest, I'm a total beginner with jQuery and now I'm stuck. I want to send data from my HTML form to a php, it adds the data to a database and returns some value that I'd like to display on my original HTML. Here's my code:

$.ajax({
  type: "POST",
  url: "http://mysite.com/process.php",
  data: { data: mydata },
  cache: false,
  dataType: "text",
  error: function(jqXHR, textStatus, errorThrown){
        alert(jqXHR.status);
        alert(jqXHR.statusText);
        alert(jqXHR.responseText);
    },
  success: function(data){
        getContentBox().innerHTML = data;
}
});

It returns a jqXHR object with status=0, statusText="error" and empty responseText. However, my php seems to work, I see my data inserted in my DB. What am I doing wrong?

Any help would be appreciated. Thanks in advance!

EDIT: Chrome console says XMLHttpRequest cannot load http://mysite.com/data.php. Origin http://www.mysite.com is not allowed by Access-Control-Allow-Origin.

Have you looked at the request/response in Firebug or some other tool? — Jay Blanchard, May 07 '12 at 13:03
PHP just simply prints out the text (print $data;). Just looked at the request with Chrome: Status text: (canceled) Type: application/x-www-form-urlencoded; charset=UTF-8 — nxu, May 07 '12 at 13:09
You might try changing the url to [http://www.mysite.com/process.php](http://www.mysite.com/process.php). Cross-Origin can be really picky that: www.domain.com cannot access sample.domain.com. — ShelbyZ, May 07 '12 at 13:17
Thanks! Not totally this, but changed absolute path to relative (simply process.php) and now it works. — nxu, May 07 '12 at 13:25
Hi, you don't need to yell "SOLVED" in titles like as in an old fashioned discussion forum :) Just post an answer (when the time allows it) and mark it accepted. It'll be interpreted as a "solved problem". In the meanwhile you could post a comment on the question indicating that it's already solved and that you'll post the answer later. — BalusC, May 07 '12 at 13:29
Alright, sorry :). Solution will come later, as soon as I'm allowed to post it, thanks @ShelbyZ — nxu, May 07 '12 at 13:38

nxu · Accepted Answer · 2015-02-03T14:31:42.673

ShelbyZ's comment led me to the solution:

The browser refused to execute the request when I tried using an absolute URL, i had to write it as relative.

$.ajax({
  type: "POST",
  url: "process.php",
  data: { data: mydata },
  cache: false,
  dataType: "text",
  error: function(jqXHR, textStatus, errorThrown){
        alert(jqXHR.status);
        alert(jqXHR.statusText);
        alert(jqXHR.responseText);
    },
  success: function(data){
        getContentBox().innerHTML = data;
}
});

Thanks!

score 0 · Answer 2 · answered May 07 '12 at 13:07

0

Try this (you forgot to close a bracket) :

$.ajax({
  ...
  success: function(data){
    getContentBox().innerHTML = data;
  }
});

answered May 07 '12 at 13:07

Olivier G

125
6

Ergh, true, in my script it's there, it's just a copy-paste error. Thanks tho. – nxu May 07 '12 at 13:12

score 0 · Answer 3 · answered May 07 '12 at 18:04

Why not use the built in post function of jquery to simplify this i.e.

            $.post('http://mysite.com/process.php', mydata, function(data) {
                if (data.status == 1) {
                    getContentBox().html() = data;
                } else {
                    alert(data.status);
                    alert(data.statusText);
                    alert(data.responseText);
                }
            });

im not sure what your status responses are so you may have to edit that but this will work if you put it inside of a $('form here').submit(function() {POSTCODEHERE});

score 0 · Answer 4 · answered Nov 28 '16 at 11:08

I had the same problem. Ajax function was bound to the button(type="submit") inside of the <form>, so always when I pressed this button my page reloaded and error function worked instead of success. I really don't know how is this related but when I add event.preventDefault() to button's action listener and it's become working fine.

jQuery ajax function returns an error

4 Answers4