This tutorial explains with code examples how to get JSON data sent with Ajax from JavaScript to PHP.
You can use one of these variants:

Using the php://input stream

- Documentation about PHP I/O streams
In this case the JSON data is sent as string via ajax with application/json Content-type.
- Example.
In JavaScript:
<script>
var data ={s1:'coursesweb.net', s2:'gamv.eu', y:2020};

//jsn_str = json string
function ajaxF(jsn_str) {
 var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // XMLHttpRequest object

 request.open('POST', 'test.php', true); // set the request

 //sends data as json
 request.setRequestHeader('Content-type', 'application/json');
 request.send(jsn_str);

 // Check request status
 // If the response is received completely, alert response
 request.onreadystatechange =()=>{
 if(request.readyState ==4){
 alert(request.responseText); // coursesweb.net
 }
 }
}

//converts data object in json string and sends it to php
let jsn = JSON.stringify(data);
ajaxF(jsn);
</script>
In PHP (test.php):
$arr = json_decode(file_get_contents('php://input'), true);
echo $arr['s1'];
exit;

Adding JSON data in the $_POST variable

In this case the JSON data is asigned to a name (here "jsn"), and is sent as string via ajax with POST and application/x-www-form-urlencoded Content-type.
- Example.
In JavaScript:
<script>
var data ={s1:'coursesweb.net', s2:'gamv.eu', y:2020};

//jsn_str = json string
function ajaxF(jsn_str) {
 var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // XMLHttpRequest object

 request.open('POST', 'test.php', true); // set the request

 //sends data
 request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 request.send('jsn='+jsn_str);

 // Check request status
 // If the response is received completely, alert response
 request.onreadystatechange =()=>{
 if(request.readyState ==4){
 alert(request.responseText); // gamv.eu
 }
 }
}

//converts data object in json string and sends it to php
let jsn = JSON.stringify(data);
ajaxF(jsn);
</script>
In PHP (test.php):
$arr = isset($_POST['jsn']) ? json_decode($_POST['jsn'], true) :['s2'=>'default'];
echo $arr['s2'];
exit;

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute indicates that an input field must be filled out before submitting?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Which CSS method increases or decreases the size of the HTML element (including its content)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click on the Date object method that returns the day of the month.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Which function is used to upload a file on server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "The file succesfully uploaded";
}
How to get JSON data from JavaScript to PHP

Last accessed pages

  1. PuzzleImg - Script to Create Image Puzzle Game (4690)
  2. HTML Course - Free Lessons (14595)
  3. JavaScript Chronometer / Stopwatch (5794)
  4. Create simple Website with PHP (27179)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (48040)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (991)
  2. Contact page - CoursesWeb (954)
  3. Tabs effect with CSS (950)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (402)
  5. Insert, Select and Update NULL value in MySQL (367)