LebGeeks

A community for technology geeks in Lebanon.

You are not logged in.

#1 November 10 2011

MrClass
Member

Send data from Javascript to PHP -> AJAX?

Hello everyone. I am trying to bring my focus again on web development (after spending alot of time working on Mac server IT issues). I am currently investigating AJAX. I know the basics of web (HTML and whatnot), client side scripting (javascript), and my favorite server side scripting language (PHP). I found several online tutorials about the integration of PHP with AJAX, but I am still confused how AJAX works. Let me try to explain to you so you can see if I got things right:

So AJAX is basically Javascript capable of passing data on the web without the need of refresh the page or moving to a different page. Usually data is (most of the time) inputted from HTML forms. This data is passed to Javascript via an event that is applied on the HTML form elements. In Javascript, an XMLHttpRequest request is initialized (the proper request must be used according to the browser). When the request is ready, a function should be executed, so in this function we define what will be done with what data we have. We open the request with a page URL and a method (GET? POST?), then send the data.

Is this how things work between AJAX and PHP?

I am trying to make form that contains several textarea elements. Is there a way that can let me enter all the data in the textareas then hit a button that sends the data to my PHP file without refreshing the page? So far I have seen examples where only 1 textbox is used, but how can I apply this for several textareas. Also is there a way that after the data is transferred to PHP I reload only the textareas and load them with the previously typed data, or does require at least a single page refresh?

Thanks for any feedback!

Offline

#2 November 10 2011

Ra8
Member

Re: Send data from Javascript to PHP -> AJAX?

We open the request with a page URL and a method (GET? POST?), then send the data.

Then the PHP page will send whether the request succeeded or failed back to AJAX

This is how you can send many textareas values:

var textarea=document.getElementsByTagName("textarea");
var q="var1="+textarea[0].innerHTML+"&var2="+textarea[1].innerHTML; //etc... to send many variables
var xmlhttp;
if (window.XMLHttpRequest)
  {
	xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
		//do something on success
                //You can change xmlhttp.readyState==4 && xmlhttp.status==200 so that you can set a function on failure or other..
    }
  }
xmlhttp.open("POST","./page.php?getVar=1",true); // you can send both post and get requests methods
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(q);

What do you mean by reloading only the texteareas?

Offline

#3 November 10 2011

MrClass
Member

Re: Send data from Javascript to PHP -> AJAX?

Oh, but how can you take the data via POST?

The URL you're using can transfer data but you need GET to catch the data on the other side (the PHP side), right?

Last edited by MrClass (November 10 2011)

Offline

#4 November 10 2011

Kassem
Member

Re: Send data from Javascript to PHP -> AJAX?

jQuery makes your life easier...

$.ajax({
   url: "YOUR URL GOES HERE", //it can be any page that accepts GET or POST calls
   type: "POST", //default is GET
   data: {
      var1 : "val1",
      var2 : "val2"
   }
   success: function(data) {
     //do whatever you want with the data you got back from the server
   }
});

jQuery Documentation: http://api.jquery.com/jQuery.ajax/

Offline

#5 November 10 2011

rolf
Member

Re: Send data from Javascript to PHP -> AJAX?

Yes, what you wrote is correct. JavaScript requests a page on the server, and can send to it POST and GET data. The result of this request is then received and processed by javascript which updates the page on the client.
jQuery has some methods which make it all easier and result in easier to understand code, taking care of the technical details.
This result (data) that is received by javascript can be just HTML to insert in a part of the page, or (even nicer) it can be a JSON object. You can do something like this on the server (PHP):

$toSend = array(
   'head' => 'head data blah blah',
   'body' => 'blah blah blah'
);
print(json_encode($toSend));

Then on the client, when you receive (JSON) data and enter it into a variable, say receivedData, you can access various parts of it like this; receivedData.head, receivedData.body...

I won't go into details regarding how to do it in JavaScript, but jQuery makes it very easy.

Offline

#6 November 11 2011

Ra8
Member

Re: Send data from Javascript to PHP -> AJAX?

MrClass wrote:

Oh, but how can you take the data via POST?

The URL you're using can transfer data but you need GET to catch the data on the other side (the PHP side), right?

This is the line where it actually sends the variables, but you need to setup the request correctly before.

xmlhttp.send(q);

No no, the GET method (where i added ?GetVar=1) you will use $_GET['getVar'] in PHP, and the variables in the var q=... you will use $_POST['var1'] and $_POST['var2'] ....

In jQuery it's maybe easier like rolf and Kassem said.

Offline

#7 November 11 2011

MrClass
Member

Re: Send data from Javascript to PHP -> AJAX?

Hmm, Jquery is amazing! I'm going to stop working on AJAX and go with Jquery. I'll develop something and post my work.

Last edited by MrClass (November 11 2011)

Offline

Board footer