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.

Answer 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!