thinkphp 无刷新提交

基础概念

ThinkPHP 是一个基于 PHP 的轻量级 Web 开发框架，它提供了丰富的功能和组件，使得开发者能够快速构建 Web 应用程序。无刷新提交（也称为 AJAX 提交）是一种在不重新加载整个页面的情况下，通过 JavaScript 异步地向服务器发送请求并获取响应的技术。

类型

GET 请求：通过 URL 参数传递数据。
POST 请求：通过请求体传递数据。

应用场景

表单提交：用户填写表单后，无需刷新页面即可提交数据。
动态更新：页面上的某些部分可以动态更新，而不需要重新加载整个页面。
实时交互：如聊天应用、实时数据更新等。

示例代码

以下是一个使用 ThinkPHP 和 jQuery 实现无刷新提交的示例：

前端代码（HTML + jQuery）

<!DOCTYPE html>
<html>
<head>
    <title>ThinkPHP 无刷新提交示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="myForm">
        <input type="text" name="name" placeholder="请输入姓名">
        <input type="email" name="email" placeholder="请输入邮箱">
        <button type="submit">提交</button>
    </form>
    <div id="result"></div>

    <script>
        $(document).ready(function() {
            $('#myForm').on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    url: '/index.php/index/Index/submit',
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        $('#result').html(response);
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>
</body>
</html>

后端代码（ThinkPHP 控制器）

<?php
namespace app\index\controller;

use think\Controller;

class Index extends Controller
{
    public function submit()
    {
        $data = input('post.');
        if (!empty($data['name']) && !empty($data['email'])) {
            return json(['status' => 'success', 'message' => '提交成功']);
        } else {
            return json(['status' => 'error', 'message' => '提交失败，请填写完整信息']);
        }
    }
}