PHP와 Ajax: 반응형 Ajax 애플리케이션 구축

이 튜토리얼에서는 PHP와 Ajax를 사용하여 Ajax 애플리케이션을 구축하는 방법을 설명합니다. 먼저 데이터베이스와 테이블을 생성한 다음(1단계) PHP 연결을 설정합니다(2단계). 다음으로 Ajax 요청을 보내는 JavaScript 코드를 작성하고(3단계), Ajax 요청을 처리하고(4단계), 마지막으로 웹 양식을 생성합니다(5단계). 이 애플리케이션을 실행하면 사용자가 데이터베이스에 성공적으로 추가되었는지 확인할 수 있습니다.

Ajax를 사용한 PHP: 반응형 Ajax 애플리케이션 구축

소개

Ajax(Asynchronous JavaScript and XML)는 전체 페이지를 다시 로드하지 않고도 웹 애플리케이션이 Ajax와 작동할 수 있게 해주는 기술입니다. 이를 통해 반응성이 뛰어나고 사용자 친화적인 애플리케이션을 구축할 수 있습니다. 이 튜토리얼에서는 PHP와 Ajax를 사용하여 간단한 Ajax 애플리케이션을 구축하는 방법을 보여줍니다.

사전 조건

• PHP 서버
• MySQL 데이터베이스
• 기본 웹 개발 지식

1단계: 데이터베이스 및 테이블 생성

"users"라는 MySQL 데이터베이스를 생성하고 "users"에 대한 테이블 생성 :

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

2단계: PHP 연결 설정

PHP 파일에서 MySQL 데이터베이스에 대한 연결 설정:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "users";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
?>

3단계: Ajax JavaScript

를 사용하여 다음 JavaScript 코드를 작성하면 전송됩니다. add_user.php 파일에 대한 Ajax 요청:

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);
    }
  };
}

4단계: Ajax 요청 처리

add_user.php 파일을 생성하여 JavaScript의 Ajax 요청 처리:

<?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();
?>

5단계: Web Forms

HTML 생성 사용자 이름과 이메일을 입력하는 양식:

<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>

실제 예

이제 이 Ajax 애플리케이션을 실행할 수 있습니다. 웹 브라우저의 개발자 도구(예: Chrome 콘솔)를 열고 "사용자 추가" 버튼을 클릭하세요. 사용자가 데이터베이스에 성공적으로 추가되었음을 확인하는 팝업 메시지가 표시되어야 합니다.

학습 범위 확장

• 데이터 상호 작용을 위해 JSON 및 웹 서비스 사용
• Ajax 및 PHP 라이브러리(예: jQuery)
• Ajax 보안 모범 사례

위 내용은 PHP와 Ajax: 반응형 Ajax 애플리케이션 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!