How to Send Data from JavaScript to a MySQL Database Using Ajax and PHP?

How to send data from Javascript to a MySQL database

In this article, we will explore how to send data from JavaScript to a MySQL database using Ajax and PHP.

Understanding the limitations of JavaScript

JavaScript, by itself, cannot directly interact with a MySQL database because it runs on the client-side (in the browser), while databases typically reside on the server-side.

Connecting JavaScript and MySQL using PHP

To bridge this gap, we need to use an intermediate server-side language such as PHP. We can create a PHP file that will serve as a bridge between the JavaScript and the MySQL database.

Sending data using Ajax

Ajax (Asynchronous JavaScript and XML) allows us to make requests to the server and update parts of a webpage without reloading the entire page. In our case, we will use Ajax to send the data from the JavaScript to the PHP file handling the database interaction.

PHP script for database interaction

The PHP file will handle the following tasks:

• Connecting to the MySQL database
• Receiving the data from the Ajax request
• Inserting the data into the database
• Sending a response to the Ajax request

Complete example

Below is an example of a complete solution using JavaScript, Ajax, and PHP:

HTML/JavaScript

<code class="html">
  
    <script type="text/javascript">
      function sendData() {
        // Replace with your form data
        var data = { data: 'Hello World' };

        $.ajax({
          type: "POST",
          url: "php/insert.php",
          data: data,
          success: function(data) {
            console.log("Data sent successfully");
          },
          error: function(error) {
            console.log("Error sending data");
          }
        });
      }
    </script>
  

  
    <button onclick="sendData()">Send Data</button>
  
</code>

PHP

<code class="php"><?php $data = $_POST['data'];

// Replace with your database connection details
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection
if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}

// Prepare and bind
$stmt = mysqli_prepare($conn, "INSERT INTO table (data) VALUES (?)");
mysqli_stmt_bind_param($stmt, "s", $data);

// Execute
mysqli_stmt_execute($stmt);

// Close connection
mysqli_close($conn);
?></code>

In this example, we create an Ajax request in JavaScript that sends data to our PHP script, which then connects to a MySQL database, inserts the data, and responds to the Ajax request.

The above is the detailed content of How to Send Data from JavaScript to a MySQL Database Using Ajax and PHP?. For more information, please follow other related articles on the PHP Chinese website!