PHP dan Ajax: Membina aplikasi Ajax responsif

Tutorial ini menerangkan cara membina aplikasi Ajax menggunakan PHP dan Ajax. Mula-mula, cipta pangkalan data dan jadual (langkah 1), kemudian buat sambungan PHP (langkah 2). Seterusnya, tulis kod JavaScript untuk menghantar permintaan Ajax (langkah 3), kendalikan permintaan Ajax (langkah 4), dan akhirnya buat borang web (langkah 5). Dengan menjalankan aplikasi ini, anda boleh mengesahkan bahawa pengguna telah berjaya ditambahkan ke pangkalan data.

PHP dengan Ajax: Membina Aplikasi Ajax Responsif

Pengenalan

Ajax (JavaScript Asynchronous dan XML) ialah teknologi yang membolehkan aplikasi web berfungsi dengan Ajax. Ini memungkinkan untuk membina aplikasi responsif dan mesra pengguna. Tutorial ini menunjukkan cara membina aplikasi Ajax mudah menggunakan PHP dan Ajax. prasyarat :

CREATE TABLE users (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  email VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

Langkah 2: Wujudkan sambungan PHP

Dalam fail PHP, wujudkan sambungan ke pangkalan data MySQL:

• <?php
  $servername = "localhost";
  $username = "root";
  $password = "";
  $dbname = "users";
  
  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  ?>

• Langkah 3: Ajax Tulis kod JavaScript berikut menggunakan JavaScript
• , Ia akan
permintaan Ajax kepada fail add_user.php:

function addUser() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "add_user.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("name=" + name + "&email=" + email);

  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = this.responseText;
      alert(response);
    }
  };
}

Langkah 4: Kendalikan permintaan Ajax

Cipta fail add_user.php untuk mengendalikan permintaan Ajax daripada JavaScript:

<?php
// Get the form data
$name = $_POST['name'];
$email = $_POST['email'];

// Insert data into the database
$stmt = $conn->prepare("INSERT INTO users (name, email) VALUES (?, ?)");
$stmt->bind_param("ss", $name, $email);
$stmt->execute();

// Send a success message back to the client
echo "User added successfully!";

// Close the database connection
$conn->close();
?>

Langkah 5: Borang Web

Cipta HTML borang untuk memasukkan nama pengguna dan e-mel:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">

  <label for="email">Email:</label>
  <input type="text" id="email">

  <button type="button" onclick="addUser()">Add User</button>
</form>

Contoh praktikal

Kini anda boleh menjalankan aplikasi Ajax ini. Buka alat pembangun penyemak imbas web anda (seperti konsol Chrome) dan klik butang "Tambah Pengguna". Anda sepatutnya melihat mesej pop timbul yang mengesahkan bahawa pengguna telah berjaya ditambahkan ke pangkalan data.

Perluas pembelajaran anda

Gunakan JSON dan perkhidmatan web untuk interaksi data

Perpustakaan Ajax dan PHP (cth. jQuery) Amalan terbaik keselamatan Ajax

Atas ialah kandungan terperinci PHP dan Ajax: Membina aplikasi Ajax responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!