AJAX 使用AJAX在Laravel中提交表单

在本文中，我们将介绍如何使用AJAX在Laravel中提交表单。AJAX（Asynchronous JavaScript and XML）是一种在Web应用程序中实现异步数据传输的技术。使用AJAX可以在不刷新整个页面的情况下向服务器发送和接收数据，从而提供更好的用户体验。

阅读更多：AJAX 教程

什么是AJAX？

AJAX是一种用于创建快速、动态和交互式Web页面的技术。它基于以下几个基本的Web技术：

JavaScript：用于处理和操作网页上的元素和事件。
XML（eXtensible Markup Language）：用于在服务器和浏览器之间传输和存储数据。

AJAX的工作原理是通过JavaScript异步发送HTTP请求到服务器，并在请求返回后更新网页的相应部分，而不需要刷新整个页面。

在Laravel中使用AJAX提交表单

要在Laravel中使用AJAX提交表单，我们需要进行以下几个步骤：

步骤1：在视图文件中创建表单

首先，我们需要在视图文件中创建一个表单。这个表单将包含要提交的输入字段和一个用于触发AJAX请求的按钮。例如，我们可以创建一个包含姓名和电子邮件字段的表单，并在表单底部放置一个提交按钮。

<form id="ajaxForm">
  <input type="text" name="name" id="name" placeholder="姓名"><br>
  <input type="email" name="email" id="email" placeholder="电子邮件"><br>
  <button type="submit" id="submitForm">提交</button>
</form>

步骤2：编写AJAX请求

接下来，我们需要编写JavaScript代码来处理表单提交和AJAX请求。我们可以使用jQuery来简化AJAX请求的处理过程。在表单的提交按钮上添加一个点击事件的监听器，并在监听器的回调函数中执行AJAX请求。

$(document).ready(function () {
  $('#ajaxForm').submit(function (e) {
    e.preventDefault();

    var name = $('#name').val();
    var email = $('#email').val();

    $.ajax({
      type: 'POST',
      url: '/submit-form',
      data: {
        name: name,
        email: email
      },
      success: function (response) {
        alert(response);
      }
    });
  });
});

在上面的代码中，我们首先阻止表单的默认提交行为（即页面的刷新）。然后，我们提取表单中的姓名和电子邮件值，并使用AJAX POST请求将这些值发送到服务器上的’/submit-form’路由。

步骤3：处理AJAX请求的服务器端代码

最后，我们需要在服务器端编写相应的代码来处理AJAX请求。在Laravel中，我们可以创建一个PostController来处理表单提交的AJAX请求。

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PostController extends Controller
{
    public function submitForm(Request  $request) {$ name =  $request->input('name');$ email = $request->input('email');

        // 处理表单数据
        // ...

        return '表单提交成功！';
    }
}

在上面的代码中，我们首先获取请求中的姓名和电子邮件值，并执行相应的表单处理逻辑。最后，我们返回一个简单的成功消息作为响应。

示例代码

完整的示例代码如下：

视图文件（form.blade.php）：

<form id="ajaxForm">
  <input type="text" name="name" id="name" placeholder="姓名"><br>
  <input type="email" name="email" id="email" placeholder="电子邮件"><br>
  <button type="submit" id="submitForm">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
   $(document).ready(function () {$ ('#ajaxForm').submit(function (e) {
      e.preventDefault();

      var name =  $('#name').val(); var email =$ ('#email').val();

      $.ajax({
        type: 'POST',
        url: '/submit-form',
        data: {
          name: name,
          email: email
        },
        success: function (response) {
          alert(response);
        }
      });
    });
  });
</script>

路由文件（web.php）：

use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;

Route::post('/submit-form', [PostController::class, 'submitForm']);

控制器文件（PostController.php）：

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PostController extends Controller
{
    public function submitForm(Request  $request) {$ name =  $request->input('name');$ email = $request->input('email');

        // 处理表单数据
        // ...

        return '表单提交成功！';
    }
}