Laravel ajax 表单提交 - Javascript

在Laravel应用程序中，我们经常需要使用AJAX来处理表单提交。AJAX可以使您的应用程序更快，并允许您更灵活地处理表单提交。在本教程中，我们将介绍如何使用Javascript和Laravel中的AJAX处理表单提交。

准备工作

在开始前，请确保您已经有一个运行的Laravel应用程序，并安装好了jquery：

npm install jquery

在表单中使用AJAX

首先，让我们创建一个简单的表单来演示AJAX的用途。在你的blade视图中添加下面的代码：

<form>
    <div class="form-group">
        <label for="name">姓名:</label>
        <input type="text" class="form-control" id="name" name="name">
    </div>
    <div class="form-group">
        <label for="email">电子邮件:</label>
        <input type="email" class="form-control" id="email" name="email">
    </div>
    <button type="submit" class="btn btn-primary" id="submitForm">提交</button>
</form>

现在我们已经有了一个基本的表单，我们需要为表单提交事件添加一个处理程序。以下是处理程序的代码：

$(document).ready(function() {
    $('#submitForm').click(function(e){
        e.preventDefault();
        var name = $('#name').val();
        var email = $('#email').val();
        $.ajax({
            type: "POST",
            url: "{{ url('/submit-form') }}",
            data: {
                name: name,
                email: email,
            },
            success: function(data) {
                alert('表单提交成功！');
            }
        });
    });
});

代码解释：

• 通过使用 e.preventDefault() 阻止表单的默认提交行为。
• 使用 $('#name').val() 和 $('#email').val() 获取表单的输入值。
• 使用 $.ajax() 向服务器发送POST请求。
• URL是指向Laravel路由的URL，该路由将数据处理程序的逻辑完成提交：{{ url('/submit-form') }}
• 数据是我们要提交的表单数据的对象。
• 在成功提交表单时，将弹出一个成功的提示。

现在我们已经准备好将数据提交到服务器。但是在Laravel中，我们需要设置一个路由来处理数据的处理程序，所以我们需要在 routes/web.php 文件中添加一个路由。

Route::post('/submit-form', function (Request $request) {
    // 处理表单数据
});

在服务器处理表单数据

现在，让我们在服务器端设置表单数据处理程序。当提交表单时，Laravel将发送POST请求到 /submit-form URL，我们在该URL上注册了一个路由去接受该POST请求。在我们的处理程序中，我们可以轻松地访问表单数据。

Route::post('/submit-form', function (Request $request) {
    $name = $request->input('name');
    $email = $request->input('email');
    // 处理表单数据
});

代码解释：

• 我们使用 $request->input() 方法获取表单值。

我们现在已经可以从表单中获取到值，现在我们可以将表单数据存储在数据库中或将其发送到外部API中。

返回响应

在我们处理完表单数据后，我们可能需要向客户端返回一些信息，例如成功或失败的消息。Laravel提供了多种方法来返回响应。

返回JSON响应

我们可以使用json格式返回数据。例如，如果表单成功提交，我们需要返回一个json格式的成功消息。

Route::post('/submit-form', function (Request $request) {
    $name = $request->input('name');
    $email = $request->input('email');
    // 处理表单数据

    return response()->json(['message' => '表单提交成功！']);
});

Code Explanation:

• 使用 response()->json() 方法返回JSON格式数据。

返回视图响应

另一种可能是我们需要将表单数据存储在数据库中，并返回一个视图。以下是示例代码：

Route::post('/submit-form', function (Request $request) {
    $name = $request->input('name');
    $email = $request->input('email');
    // 处理表单数据
    $user = new User();
    $user->name = $name;
    $user->email = $email;
    $user->save();

    return view('success');
});

Code Explanation:

• 在处理程序中，创建一个新的用户并将用户保存到数据库。
• 在成功时返回一个名为 'success' 的视图。

Conclusion

在本教程中，我们介绍了Laravel中如何处理表单的AJAX提交。我们首先创建一个表单，然后添加一个AJAX事件处理程序。然后我们设置一个Laravel路由来处理表单数据，并介绍了如何在处理程序中访问表单数据。最后，我们学习了如何从服务器返回JSON或视图响应。

现在，您应该已经熟悉了如何在Laravel应用程序中使用AJAX处理表单提交。祝你好运！