Ajax Course

With Ajax you can send data to a PHP script via GET and POST in the same request. The process is similar to sending data through the POST, it's actually the same, being only applied a "trick".
Data added in the URL address (the index=value pairs) are recognized by the server as being sent via GET. Thus, to send data using GET and POST in the same time, proceed as follows:
        - the values that we want to send with GET are added in the URL address that is set in the "open()" method
        - the values to be sent with POST method are added in the parameter of the "send()" function.

• To understand how to send data with AJAX using GET and POST togeter, in the same request, apply and study the following example:
  1) Create on the server a PHP file, named "get_post.php", and add into it the following code:
// if data are received via GET, with index='timp' and via POST, with index='nume', and has at least one character
if (isset($_GET['timp']) && isset($_POST['nume']) && strlen(trim($_POST['nume']))>0) {
  // gets data
  $nume = $_POST['nume'];
  $timp = $_GET['timp'];

  // return the response
  echo 'Hy <b>'.$nume.'</b>.<br />You send data to the server after you`ve spent <i>'. $timp. '</i> seconds on this web page.';
else {
  echo 'Add your name.';
- This PHP script checks if data is received via GET, with index of 'timp' and via POST with index of 'nume'. Gets that data and include it in the message that is returned by "echo".
- strlen(trim($_POST['nume']))>0 checks if the value of $_POST['nume'] it has at least one character that is not a space.

  2) Create a HTML file on the server (for example, named "get_post.html") in the same directory where the file "get_post.php" is, and add the following code into it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Ajax example GET and POST</title>

<script type="text/javascript"><!--
// sends data to a php file, via GET and POST, and displays the received answer
function ajaxrequest(php_file, tagID) {
  var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object

  // create the URL with data that will be sent to the server, via GET (a pair index=value)
  var  url = php_file+ '?timp='+document.getElementById('timp').innerHTML;

  // create pairs index=value with data that must be sent to server, via POST
  var  d_post = 'nume='+document.getElementById('nume').value;

  request.open("POST", url, true);      // sets the request

  // adds  a header to tell the PHP script to recognize the data as is sent via POST
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.send(d_post);        // sends the request

  // Check request status
  // If the response is received completely, will be transferred to the HTML tag with tagID
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      document.getElementById(tagID).innerHTML = request.responseText;

// gets and displays in a html tag (with id="timp") the number of second the user spend on the page
var secunde = 0;
function getSeconds() {
  secunde++;    // add one unit

  // add the valur in the html tag that has id="timp"
  document.getElementById('timp').innerHTML = secunde;
setInterval("getSeconds()", 1000)    // calls the function at every second

<div id="sec"><span id="timp"> </span> seconds</div>
<form action="get_post.php" method="post" name="form2" onsubmit="ajaxrequest('get_post.php', 'resp'); return false;">
  Your name: <input type="text" name="nume" id="nume" size="20" maxlength="33" />
  <input type="submit" value="Send" />
<div id="resp"> </div>

- As you can see, besides the function for Ajax, ajaxrequest(), there is another function, named "getSeconds()". At every call, this function increment a variable by one unit (second) and displays it in a HTML tag that has id="time", and this function is called every second by "setInterval()".
- When the user click on the "Send" button, it calls the "ajaxrequest()" function. After it is created the instance of the XMLHttpRequest object, gets the data to be sent via GET (the number of seconds recorded in the tag with id="timp") and add it in the URL address.
- The data that must be sent via POST are defined in the d_post variable, which will be the parameter of "send()" method.
- More necessary explanations can be found in the script code.

This example will display the fallowing result. To test it, add a name in the text-box and click on the "Send" button.
Your name:  

Daily Test with Code Example

What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
Sending data with GET and POST in the same request

Last accessed pages

  1. Register and show online users and visitors (38133)
  2. PHP MySQL - WHERE and LIKE (28306)
  3. Button Symbols (1416)
  4. Moving html element to a random direction (3849)
  5. PHP Unzipper - Extract Zip, Rar Archives (23650)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (100)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (86)
  3. SHA256 Encrypt hash in JavaScript (71)
  4. querySelector and querySelectorAll (50)
  5. SHA1 Encrypt data in JavaScript (45)