Sending data from javascript to php file

Question

I have this function that gets text from a php file on the server and plonks it into an HTML page.

What changes do I need to make to it to SEND data (just a couple of javascript variables) to the php file rather than read from it ? Hoping not many !!

function process() {
  if (xmlHttp) // the object is not void
  {
    try {
      xmlHttp.open("GET", "testAJAX.php", true);
      xmlHttp.onreadystatechange = handleServerResponse;
      xmlHttp.send(null);
    } catch (e) {
      alert(e.toString());
    }
  }
}

You need to create the xml object before you do any of this. http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery — imtheman, Aug 20 '14 at 21:27

score 0 · Answer 1 · answered Aug 20 '14 at 21:29

0

Take a look at what all headers you can make use of. In your case, you would want to use POST instead of GET

 xmlHttp.open("POST", "testAJAX.php", true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//or JSON if needed
 xmlHttp.onreadystatechange = handleServerResponse;
 xmlHttp.send(data);

answered Aug 20 '14 at 21:29

NV Bhargava

373
2
10

Many thanks for your replies people, NV Bhargava - what is the simplest way of catching the data in xmlHttp.send(data) at the php file end ? – user3881476 Aug 21 '14 at 19:58

Dominic · Answer 2 · 2014-08-20T21:41:52.063

You are probably better of using POST to send data it has less limitations. e.g:

var data = {
    user: 'Joe',
    age: 12
};

var httpReq = new XMLHttpRequest();
// true means async - you want this.
httpReq.open('POST', 'testAJAX.php', true);
// json is just a nice way of passing data between server and client
xmlhttpReq.setRequestHeader('Content-type', 'application/json');

// When the http state changes check if it was successful (http 200 OK and
// readyState is 4 which means complete and console out the php script response.
httpReq.onreadystatechange = function () {
    if (httpReq.readyState != 4 || httpReq.status != 200) return; 
    console.log(httpReq.responseText);
};

httpReq.send(JSON.stringify(data));

And read it:

$name = json_decode($_POST['name']);
$age = json_decode($_POST['age']);

score 0 · Answer 3 · answered Aug 20 '14 at 21:47

0

If it's just a couple of variables, you can pop them into the query string - although you'll want to make sure their values won't break your PHP script or open a security hole (for example, don't interpret user input as a SQL string). For more complicated data structures, use POST as others have suggested.

function process(var1value, var2value) {
    if(xmlHttp) {
        try {
           xmlHttp.open("GET", "testAJAX.php?var1="+var1value+"&var2="+var2value, true);
           xmlHttp.onreadystatechange = handleServerResponse;
           xmlHttp.send(null);
        } catch(e) {
           alert(e.toString());
        }
    }
}

answered Aug 20 '14 at 21:47

Michael Eastwood

41
3

Hi Michael, thanks for your help. How would you best approach getting the values here - "testAJAX.php?var1="+var1value+"&var2="+var2value, in the php file on the server ? – user3881476 Aug 21 '14 at 20:22
The variable values will be available in testAJAX.php in the $_GET variable. So just use $_GET['var1'] and $_GET['var2']. – Michael Eastwood Aug 25 '14 at 00:39

Sending data from javascript to php file

3 Answers3