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:
<?php
// 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">
<head>
<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
--></script>
</head>
<body>

<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" />
</form>
<div id="resp"> </div>

</body>
</html>
- 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.
seconds
Your name:  

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute can be used to add CSS styles directly in the HTML tag?
type style class
<div style="width: 80%; border: 3px solid #888888;">Content</div>
Which CSS transform method distorts the HTML element in a given angle (including its content)?
translate() scale() skew()
#some_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}
Click on the function which converts a Date object to a string.
indexOf() toString() getDate()
var rightnow = new Date();
alert( rightnow.toString() );
Which function applies a callback function to the elements of the given array?
array_merge() array_search() array_map()
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// apply the strip_tags() function to delete HTML tags from each array item
$arr = array_map("strip_tags", $arr);
}
Sending data with GET and POST in the same request

Last accessed pages

  1. Bubbles3 (47598)
  2. SHA512 Encrypt hash in JavaScript (7776)
  3. Mahjong2 (855)
  4. Mahjong Games (17769)
  5. Get Lower, Higher, and Closest Number (1574)

Popular pages this month

  1. Qwop (3030)
  2. Drag Racer V3 (1516)
  3. Bubbles3 (728)
  4. Flash Games - Free online Games (677)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (665)