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
– Jay Blanchard, Commented May 7, 2012 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
– nxu, Commented May 7, 2012 at 13:09
You might try changing the url to http://www.mysite.com/process.php. Cross-Origin can be really picky that: www.domain.com cannot access sample.domain.com. — ShelbyZ
– ShelbyZ, Commented May 7, 2012 at 13:17
Thanks! Not totally this, but changed absolute path to relative (simply process.php) and now it works. — nxu
– nxu, Commented May 7, 2012 at 13:25

nxu · Accepted Answer · 2015-02-03 14:31:42Z

1

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!

edited Feb 3, 2015 at 14:31

answered May 8, 2012 at 19:48

nxu

2,2921 gold badge23 silver badges35 bronze badges

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

Comments

Olivier G · Accepted Answer · 2012-05-07 13:07:41Z

0

Try this (you forgot to close a bracket) :

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

answered May 7, 2012 at 13:07

Olivier G

1256 bronze badges

1 Comment

nxu Over a year ago

Ergh, true, in my script it's there, it's just a copy-paste error. Thanks tho.

Clark T. · Accepted Answer · 2012-05-07 18:04:02Z

0

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});

answered May 7, 2012 at 18:04

Clark T.

1,4702 gold badges11 silver badges25 bronze badges

Comments

Nick Dekhtiarenko · Accepted Answer · 2016-11-28 11:08:53Z

0

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.

answered Nov 28, 2016 at 11:08

Nick Dekhtiarenko

11 bronze badge

Collectives™ on Stack Overflow

jQuery ajax function returns an error

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related