如何使用 ajax 在 laravel 5 中发布表单?
Posted
技术标签:
【中文标题】如何使用 ajax 在 laravel 5 中发布表单?【英文标题】:How do I post a form in laravel 5 using ajax? 【发布时间】:2015-12-04 17:15:00 【问题描述】:我在学习如何在 laravel 中创建 ajax 帖子时遇到了很多麻烦。我希望能够在验证后使用 jquery 显示错误,但我不知道如何访问发送到我的控制器的对象;所以我什至不知道在控制器中“返回”什么。有人可以帮我看看这个吗?
这是我观点的一部分
<meta name="_token" content=" csrf_token() " />
<div class='row'>
!! Form::open(['url'=>'register','id'=>'sign-up','class'=>'col-md-6 col-md-push-4 form-horizontal'])!!
<div class='form-group'>
!! Form::label('first_name', 'First Name:',['class'=>'col-xs-12 col-md-3']) !!
<div class= 'col-xs-12 col-md-6'>
!! Form::text('first_name', null, ['class' => 'form-control'])!!
</div>
</div>
<div class='form-group'>
!! Form::label('last_name', 'Last Name:',['class'=>'col-xs-12 col-md-3']) !!
<div class= 'col-xs-12 col-md-6'>
!! Form::text('last_name', null, ['class' => 'form-control'])!!
</div>
</div>
<div class='form-group'>
!! Form::label('email', 'Email Address:',['class'=>'col-xs-12 col-md-3']) !!
<div class= 'col-xs-12 col-md-6 '>
!! Form::text('email', null, ['class' => 'form-control'])!!
<div class='form-group'>
!! Form::label('password', 'Password:',['class'=>'col-xs-12 col-md-3']) !!
<div class= 'col-xs-12 col-md-6'>
!! Form::password('password', null, ['class' => 'form-control'])!!
</div>
</div>
<div class='form-group'>
!! Form::label('password_confirmation', 'Confirm Password:',['class'=>'col-xs-12 col-md-3']) !!
<div class= 'col-xs-12 col-md-6'>
!! Form::password('password_confirmation', null, ['class' => 'form-control'])!!
</div>
</div>
</div> <div class='btn btn-small'>
!! Form::submit('Join Us!',['class'=>'btn btn-success btn-sm form-control'])!!
</div>
!! Form::close() !!
</div>
.js 文件:
$(function()
$('#sign-up').on('submit',function(e)
$.ajaxSetup(
header:$('meta[name="_token"]').attr('content')
)
e.preventDefault(e);
$.ajax(
type:"POST",
url:'/register',
data:$(this).serialize(),
dataType: 'json',
success: function(data)
console.log(data);
,
error: function(data)
)
);
);
控制器:
<?php
namespace App\Http\Controllers;
use App\Http\Requests\CreateRegisterRequest;
use App\Http\Controllers\Controller;
use App\User;
use Illuminate\HttpResponse;
use Input;
class UserController extends Controller
public function create(CreateRegisterRequest $request)
public function show()
return view('user.profile');
表单请求:
<?php
namespace App\Http\Requests;
use App\Http\Requests\Request;
class CreateRegisterRequest extends Request
public function authorize()
return true;
public function rules()
return [
'first_name' =>'required',
'last_name'=>'required',
'url'=>'url',
'description',
'email'=>'unique:users,email|email',
'password'=>'min:6|confirmed',
'password_confirmation'=>'min:6'
];
【问题讨论】:
【参考方案1】:无需查看您的任何代码,我就可以告诉您我执行此任务的方式。可能还有其他方法,但是自从我开始使用 Laravel 以来,这通常是我的处理方式。
我希望能够在验证后使用 jquery 显示错误,但我不知道如何访问发送到我的控制器的对象;所以我什至不知道在控制器中“返回”什么。
让我们首先将其分解为 3 个更简单的问题。
1。如何访问发送到到我的控制器的对象?
好吧,在您的 AJAX 中,您可以选择发送 GET 或 POST 请求。约定规定您应该使用 POST 更新模型并使用 GET 从模型中检索。如果您使用的是 REST,那么您还有其他方法可以使用(PUT、PATCH、DELETE 等)。您可以自行了解有关这些内容的更多信息,但为了回答这个问题,我将仅使用 GET 和 POST 让事情变得简单。
在您的示例中,您使用 POST,所以让我们开始吧。您已经调用了 JQuery serialize
方法,这就是您需要做的所有事情。在您的 Laravel 控制器中,只需将参数 Request $request
用于方法,Laravel 方法 $request->input()
将为您提供请求中发送的所有参数的键/值数组。然后,您可以相应地处理它们。
2。我应该在控制器中返回什么?
通常,您会为 AJAX 请求返回 JSON 数据。它很容易解析,并且 javascript 和 JQuery 都有很好的对象来为您解析 JSON。
在您的 Laravel 控制器中,您可以在方法末尾添加以下行以返回一些 JSON:
return response()->json($data);
在此示例中,$data
是一个包含您要返回的 JSON 的数组。在 PHP 中,我们可以将 JSON 字符串表示为 key/value 对的数组,如下所示:
$data = [
'success': true,
'message': 'Your AJAX processed correctly'
];
通常,如果这是一个普通的旧 PHP 脚本,我们将不得不调用 PHP 的 json_encode 函数,但 Laravel 会为我们处理这个,所以我们需要做的就是传递数组。出于调试目的,您可能需要使用 JSON_PRETTY_PRINT
常量,如果您直接访问 URL,它将在屏幕上很好地输出 JSON:
return response()->json($data, 200, [], JSON_PRETTY_PRINT);
3。如何从我的控制器访问对象 sent?
现在您的响应是一个简单的 JSON 字符串,您可以使用任何内置的 JavaScript 方法来解析 JSON。我通常使用JSON.parse(json)
,其中json
是控制器返回的JSON 字符串。详情请见here。
4。那么,我该如何获取这些数据呢?
好吧,看起来您可能已经想通了,但为了确保我会澄清。您需要将路由注册到您的控制器。然后,您可以使用 JQuery AJAX 对象简单地调用该 URI,然后注入的变量 data
将是从控制器返回的任何内容,在本例中为 JSON 字符串。
【讨论】:
谢谢!我现在对此有了更好的理解:) 很高兴我能帮上忙。我知道这不是“这里的代码插入并开始”类型的答案,但我认为这种方式更好,因为现在您知道了一般步骤,并且由您来确定具体细节:) 祝你好运! 是的,我能够通过这个迷你课程用 ajax 创建一个对象,哈哈。现在我正在尝试显示错误... 为什么不将您的错误报告为 JSON 响应?这样您就可以返回错误代码、消息和描述,或任何其他数量的有用信息。 $request 对象包含错误消息,所以我应该能够将其作为响应返回并使用 javascript 解析它吗?以上是关于如何使用 ajax 在 laravel 5 中发布表单?的主要内容,如果未能解决你的问题,请参考以下文章
如何修复 Laravel 5.8 Ajax 表单提交中的内部服务器错误