ajax怎么配合php_ajax与php前后端交互完整实例教程-php教程-PHP中文网

ajax怎么配合php_ajax与php前后端交互完整实例教程

雪夜

发布： 2025-09-22 22:05:01

原创

331人浏览过

首先实现前端AJAX提交数据，后端PHP接收处理并返回响应。1. 创建包含表单的index.html页面；2. 使用ajax.js通过fetch发送JSON数据至server.php；3. server.php读取JSON输入，验证姓名和邮箱，返回对应结果；4. 前端根据响应更新页面内容，实现无刷新交互。需注意CORS、数据格式一致性及安全性。

ajax怎么配合php_ajax与php前后端交互完整实例教程

AJAX 配合 PHP 实现前后端交互，是 Web 开发中非常基础且实用的技术。下面通过一个完整的实例，带你从零开始实现前端使用 AJAX 提交数据，后端用 PHP 接收并返回响应的全过程。

1. 项目结构说明

确保项目目录结构清晰，便于管理：

index.html（前端页面）
ajax.js（AJAX 请求脚本）
server.php（后端处理逻辑）

2. 前端页面：index.html

创建一个简单的 HTML 页面，包含表单和按钮，用户输入姓名和邮箱后，通过 AJAX 提交给 PHP 处理。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>AJAX + PHP 示例</title>
</head>
<body>
  <h2>用户信息提交</h2>
  <form id="userForm">
    <label>姓名：<input type="text" name="name" required /></label><br><br>
    <label>邮箱：<input type="email" name="email" required /></label><br><br>
    <button type="submit">提交</button>
  </form>

  <div id="result"></div>

  <script src="ajax.js"></script>
</body>
</html>

登录后复制

3. 前端脚本：ajax.js

使用原生 JavaScript 的 fetch API 发送 POST 请求，阻止表单默认提交行为。

document.getElementById('userForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止页面刷新

  const formData = new FormData(this); // 收集表单数据
  const data = {
    name: formData.get('name'),
    email: formData.get('email')
  };

  fetch('server.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(result => {
    const resultDiv = document.getElementById('result');
    if (result.success) {
      resultDiv.innerHTML = '<span style="color:green;">' + result.message + '</span>';
    } else {
      resultDiv.innerHTML = '<span style="color:red;">' + result.message + '</span>';
    }
  })
  .catch(error => {
    document.getElementById('result').innerHTML = '请求出错：' + error;
  });
});

登录后复制

4. 后端处理：server.php

PHP 脚本接收 JSON 格式的数据，验证并返回 JSON 响应。

琅琅配音

全能AI配音神器

208

查看详情

立即学习“PHP免费学习笔记（深入）”；

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); // 若前端与 PHP 不同域需开启 CORS
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

// 获取前端发送的 JSON 数据
$input = file_get_contents('php://input');
$data = json_decode($input, true);

// 初始化返回数据
$response = [];

// 验证数据
if (isset($data['name']) && isset($data['email'])) {
  $name = trim($data['name']);
  $email = filter_var(trim($data['email']), FILTER_VALIDATE_EMAIL);

  if ($name === '' || !$email) {
    $response = [
      'success' => false,
      'message' => '请填写正确的姓名和邮箱'
    ];
  } else {
    // 模拟保存成功
    $response = [
      'success' => true,
      'message' => "欢迎，{$name}！我们已将确认邮件发送至 {$email}。"
    ];
  }
} else {
  $response = [
    'success' => false,
    'message' => '缺少必要参数'
  ];
}

// 返回 JSON 响应
echo json_encode($response);
?>

登录后复制