Скачать или смотреть How to Post Data to a PHP File Using Vanilla Javascript

Learn how to effectively send JSON data to a PHP file using Vanilla Javascript. This guide provides step-by-step instructions for handling POST requests and decoding JSON data on the server side.
---
This video is based on the question https://stackoverflow.com/q/62629005/ asked by the user 'Mathew' ( https://stackoverflow.com/u/13720421/ ) and on the answer https://stackoverflow.com/a/62629234/ provided by the user 'bumperbox' ( https://stackoverflow.com/u/20869/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Post to Php file using Vanilla Javascript

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Posting Data to PHP with Vanilla Javascript

When working with web applications, you may find yourself needing to send data from the client side (browser) to the server side (PHP). Filling out forms and sending data via POST is a common scenario, but what happens when you're dealing with JavaScript objects instead? In this guide, we'll explore how to post data to a PHP file using Vanilla JavaScript and how to handle that data on the PHP side.

The Challenge

You may have encountered a situation where you're trying to send an object from JavaScript to PHP. Instead of using traditional form submission methods (like the name attributes in forms), you’re utilizing the Fetch API to send JSON data. This raises the question: How does PHP resolve the posted arguments?

Example JavaScript Code

Here’s a typical snippet of how you might post an object to a PHP file:

[[See Video to Reveal this Text or Code Snippet]]

In the code above, we define an object with an email and a message, and then we send that object to myFile.php using the Fetch API. The crucial part here is that we’re using JSON.stringify to convert our JavaScript object into a JSON string for transmission.

The Solution on the PHP Side

When the data is sent as JSON, you can't access it the same way you would with traditional form submissions using $_POST. Instead, you need to read the raw input from the PHP input stream. Here’s how to capture the data sent by JavaScript in your PHP script:

Step-by-Step Instructions

Read the Input: Use file_get_contents('php://input') to read the raw data sent to your script.

Decode the JSON: Use json_decode to convert the JSON string back into a PHP array.

Access Your Data: Finally, access the data using the keys.

PHP Code Example

Here's the PHP code you’ll want to use:

[[See Video to Reveal this Text or Code Snippet]]

This code will correctly parse the JSON data sent from your JavaScript application, allowing you to utilize the email and message values as needed.

Extra Considerations

Is It Important to Send Data in JSON Format?

Using JSON to send data has several advantages:

Structured Data: JSON is a structured format that's easy to read and write.

Ease of Use: Many APIs expect data in JSON format, making it a standard choice for modern web applications.

Support: Most programming languages, including PHP, have built-in functions to encode and decode JSON, simplifying the process.

Using the Fetch API, especially with the Content-Type: 'application/json', communicates clearly to the server what kind of data it is dealing with. Thus, it is generally recommended to send data in JSON format while using Fetch.

Conclusion

Posting data from Vanilla JavaScript to a PHP file can be straightforward if you know how to handle JSON. By reading the input properly and decoding it on the server side, you ensure that your application can communicate effectively. This method not only provides a clean way to send data but also adheres to modern web standards.

If you have any further questions or need additional clarification on this topic, feel free to leave a comment!