How to send a javascript object to php

Updated: 20-Aug-2022 / Tags: Javascript Tutorials / Views: 7106 - Author: George

Introduction

In this tutorial we are gonna see two examples on how to send a javascript object to a php file.

In the first example we are going to use the Fetch API, and in the second example we are going to use the XMLHttpRequest object.

Let's see how we do this.

Files we need

|-- root
  |-- script.js	
  |-- script.php
  • We need a script.js file to write the javascript code.
  • And a script.php file to catch the javascript object.

The javascript code

First of all let's go to the script.js file and write a javascript object.

let user = {
	"username": "Mike",
	"password": "Mike567",
	"gender": "male",
	"email": "mike@mail.com"
}
  • Here we have a simple object named user. We are going to use this object in both examples.

Using the Fetch method

Let's see in our first example how to use the fetch method to send the javascript object to the php file.

let params = {
	"method": "POST",
	"headers": {
		"Content-Type": "application/json; charset=utf-8"
	},
	"body": JSON.stringify(user)
}

fetch("script.php", params)
  • In line 8 we are going to create an object named params. The params object will hold the parameters we need to specify in order to send the javascript object to the php file.
  • In line 9 we set the http method to POST.
  • In line 10 the "headers" property is holding an object in which we are going to set the "Content-Type" header to application/json, and the character encoding to utf-8.
  • In line 13 we have the "body" property.
    The "body" property will hold the user object but we have to encode it first to JSON using the JSON.stringify method.
  • And finally in line 16 we are going to use the fetch method to send the javascript object to the php file.
    The fetch method takes two arguments. In the first argument we specify the php file that will catch the javascript object, and in the second argument we pass-in the parameters needed to send the request.

And that's it, this is how we send a javascript object to a php file using the fetch method.

Now lets go to the php file to catch the users object.

The php file

In the php file we are going to check if there is a POST request in line 2.

<?php 
	if(isset($_POST)){
		$data = file_get_contents("php://input");
		$user = json_decode($data, true);
		
		// do whatever we want with the users array.
	}
  • In line 3 we use the file_get_contents function to catch the incoming JSON data.
  • Before we can use the incoming json data we have to decode them to a php array. We do this with the json_decode function. in line 4.
    The keyword true decodes the data to a php array.
    json_decode($data, true); // returns an array

    If we don't use the true keyword the json_decode function will return a php object.
    json_decode($data); // returns an object
  • Now we can do with the user's data whatever we want.

Now let's see our second example.

The XMLHttpRequest method

In this example we are going to use the XMLHttpRequest object to send the javascript user object to the php file.

let user = {
	"username": "Mike",
	"password": "Mike567",
	"gender": "male",
	"email": "mike@mail.com"
}

jsonString = JSON.stringify(user);
let http = new XMLHttpRequest();

http.open('post', "script.php", true);
http.setRequestHeader("content-type", "application/x-www-form-urlencoded");
http.send(jsonString);
  • Again before we send the user object to the php file, we have to convert it to JSON. And again we use the JSON.stringify method in line 8.
  • Next in line 9 we create a new XMLHttpRequest object and store it in the http variable.
  • In line 11 we use the .open method to prepare the request.
    The .open method takes three arguments.
    In the first argument we specify the http method, again we use POST.
    In the second argument we pass-in the php file that will catch the user object.
    And in the third argument the keyword true tells the .open method to send the request async.
  • In line 12 we set the header.
  • And in line 13 we execute the request using the .send method, passing as an argument the encoded user object.

And that's it. We are sending a javascript object to a php file using the XMLHttpRequest object.

We don't have to make any changes in the php file.

Summary

In this quick tutorial we saw how to send a JavaScript object to a php file using the fetch method first, and an XMLHttp request the second time.

Last Words

Thanks for reading, i hope you find the article helpful.
Please leave a comment if you find any error's, so i can update the page with the correct code.

Source code

You can download the source code and use it in any way you like.

Times downloaded: 486

Buy me a coffee

If you like to say thanks, you can buy me a coffee.

Buy me a coffee with paypal