使用 AJAX 与 PHP 实现无刷新数据提交-php教程-PHP中文网

使用 AJAX 与 PHP 实现无刷新数据提交

DDD

发布： 2025-07-07 16:02:02

原创

699人浏览过

使用 ajax 与 php 实现无刷新数据提交

本文旨在指导开发者如何使用 AJAX 技术与 PHP 后端进行交互，实现无需刷新页面的数据提交功能。通过一个简单的表单提交示例，详细讲解前端 AJAX 代码的编写，以及后端 PHP 脚本的处理流程，帮助读者理解并掌握 AJAX 在 PHP 项目中的应用。

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它允许您在后台与服务器进行少量数据交换，这意味着可以在不重新加载整个页面的情况下，对网页的局部进行更新。在 PHP 项目中，AJAX 常用于实现无刷新表单提交、实时数据更新等功能，从而提升用户体验。

前端：使用 jQuery 发送 AJAX 请求

在这个示例中，我们将使用 jQuery 库来简化 AJAX 请求的编写。首先，确保在 HTML 文件中引入 jQuery 库。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

登录后复制

接下来，我们创建一个包含姓名、邮箱和联系方式的表单，并添加一个提交按钮。

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

<form>
    <input type="text" name="name"><br>
    <input type="email" name="email"><br>
    <input type="number" name="contact"><br>
    <button type="button" id="submit">Submit</button>
</form>

登录后复制

然后，使用 jQuery 监听提交按钮的点击事件，并在事件处理函数中使用 $.ajax() 方法发送 AJAX 请求。

$(document).ready(function () {
    $('#submit').click(function () {
        $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
            success: function (data) {
                alert(data);
            }
        });
        return false; // 阻止表单默认提交行为
    });
});

登录后复制

这段代码的解释如下：

$(document).ready(function () { ... });：确保在文档加载完成后执行代码。
$('#submit').click(function () { ... });：监听 ID 为 submit 的按钮的点击事件。
$.ajax({ ... });：发送 AJAX 请求。
- type: 'post'：指定请求类型为 POST。
- url: 'post.php'：指定请求的 URL 为 post.php（后端处理脚本）。
- data: $('form').serialize()：将表单数据序列化为字符串，并作为请求数据发送。 $('form').serialize() 方法会将表单中的所有字段名和值转换为 URL 编码的字符串，例如：name=John&email=john@example.com&contact=1234567890。
- success: function (data) { ... }：指定请求成功后的回调函数。 data 参数包含从服务器返回的数据。在这个例子中，我们使用 alert(data) 将服务器返回的数据显示为一个警告框。
return false;：阻止表单的默认提交行为，防止页面刷新。

后端：PHP 处理 AJAX 请求

创建一个名为 post.php 的文件，用于处理 AJAX 请求。

<?php

//incluce db connection file (根据你的实际情况修改)
//include 'db_connection.php';

if(isset($_POST["name"]) || isset($_POST["email"]) || isset($_POST["contact"])) {

    //Data Insert Login Here (根据你的实际情况修改)
    // $name = $_POST["name"];
    // $email = $_POST["email"];
    // $contact = $_POST["contact"];

    // $sql = "INSERT INTO users (name, email, contact) VALUES ('$name', '$email', '$contact')";

    // if ($conn->query($sql) === TRUE) {
    //     echo "New record created successfully";
    // } else {
    //     echo "Error: " . $sql . "<br>" . $conn->error;
    // }

    echo 'response here';//Message to be shown on success
}

?>

登录后复制

这段代码的解释如下：

if(isset($_POST["name"]) || isset($_POST["email"]) || isset($_POST["contact"])) { ... }：检查 POST 请求中是否包含 name、email 或 contact 字段。
echo 'response here';：向前端返回一个字符串作为响应数据。实际应用中，您应该根据实际情况返回更具体的数据，例如 JSON 格式的数据。
重要提示： 上述代码段注释掉的部分是数据库操作的示例，你需要根据自己的数据库连接方式和表结构进行修改。并且，请务必对用户输入进行验证和过滤，以防止 SQL 注入等安全问题。

完整示例

将以上代码整合到一个完整的 HTML 文件中：




    Php submit for using Ajax


    
        

        

        

        
    


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    $(document).ready(function () {
        $('#submit').click(function () {
            $.ajax({
                type: 'post',
                url: 'post.php',
                data: $('form').serialize(),
                success: function (data) {
                    alert(data);
                }
            });
            return false;
        });
    });
</script>

登录后复制

将此 HTML 文件保存为 form.php，并确保 post.php 文件与 form.php 文件位于同一目录下。在浏览器中打开 form.php，填写表单并点击提交按钮，您应该会看到一个警告框，显示从 post.php 返回的响应数据。

注意事项

错误处理： 在实际项目中，应该添加错误处理机制，以便在 AJAX 请求失败时能够及时通知用户。例如，可以使用 error 回调函数来处理请求错误。
数据格式： 通常情况下，建议使用 JSON 格式进行数据交换。在 PHP 中，可以使用 json_encode() 函数将数据编码为 JSON 字符串，并使用 json_decode() 函数将 JSON 字符串解码为 PHP 数组或对象。
安全性： 务必对用户输入进行验证和过滤，以防止 XSS 攻击和 SQL 注入等安全问题。
跨域问题： 如果前端和后端位于不同的域名下，可能会遇到跨域问题。可以使用 CORS (Cross-Origin Resource Sharing) 来解决跨域问题。