Laravel 5.3 中 ajax POST 的最小工作示例 [英] Minimum Working Example for ajax POST in Laravel 5.3
问题描述
有人可以用一个完整的最小示例来解释 Laravel 5.3 中的 ajax post 方法吗?我知道网络上有一些资源，但我错过了一个简洁、直接的最小示例.
Can someone please explain the ajax post method in Laravel 5.3 with a full-working minimum example? I know there are some resources in the web, but I miss a concise, straight-forward minimum example.
推荐答案
我假设你对模型-控制器-视图范式有基本的了解，对 Laravel 有基本的了解，对 JavaScript 和 JQuery 有基本的了解(我将为简单起见而使用).
I presume you have a basic understanding of the model-controler-view paradigm, a basic understanding of Laravel and a basic understanding of JavaScript and JQuery (which I will use for reasons of simplicity).
我们将创建一个编辑字段和一个发布到服务器的按钮.(这适用于从 Laravel 5.0 到 5.6 的所有版本)
We will create an edit field and a button which posts to the server. (This works for all versions from Laravel 5.0 to 5.6)
首先你需要添加路由到你的routes/web.php.为视图创建一条路径，就像您从普通视图中知道的那样:
At first you need to add routes to your routes/web.php. Create one route for the view, just as you know from ordinary views:
Route::get('ajax', function(){ return view('ajax'); });
你需要创建的第二条路由是处理ajax post请求的路由.请注意，它正在使用 post 方法:
The second route you need to create is the route that handles the ajax post request. Take notice that it is using the post method:
Route::post('/postajax','AjaxController@post');
2.控制器功能
在您刚刚创建的(第二个)路由中，AjaxController 中的控制器函数 post 被调用.所以创建控制器
2. The Controller Function
In the (second) route you created just now, the Controller function post in the AjaxController is called. So create the Controller
php artisan make:controller AjaxController
并在 app/Http/Controllers/AjaxController.php 中添加函数 post 包含以下几行:
and in the app/Http/Controllers/AjaxController.php add the function post containing the following lines:
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
class AjaxController extends Controller {
public function post(Request $request){
$response = array(
'status' => 'success',
'msg' => $request->message,
);
return response()->json($response);
}
}
该函数已准备好通过 Http 请求接收数据并返回一个 json 格式的响应(其中包含状态成功"和函数从请求中获得的消息).
The function is ready to receive data via a Http request and returns a json-formatted response (which consists of the status 'success' and the message the function got from the request).
第一步我们定义了指向视图ajax的路由，所以现在创建视图ajax.blade.php.
In the first step we defined the route pointing to the view ajax, so now create the view ajax.blade.php.
<!DOCTYPE html>
<html>
<head>
<!-- load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- provide the csrf token -->
<meta name="csrf-token" content="{{ csrf_token() }}" />
<script>
$(document).ready(function(){
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$(".postbutton").click(function(){
$.ajax({
/* the route pointing to the post function */
url: '/postajax',
type: 'POST',
/* send the csrf-token and the input to the controller */
data: {_token: CSRF_TOKEN, message:$(".getinfo").val()},
dataType: 'JSON',
/* remind that 'data' is the response of the AjaxController */
success: function (data) {
$(".writeinfo").append(data.msg);
}
});
});
});
</script>
</head>
<body>
<input class="getinfo"></input>
<button class="postbutton">Post via ajax!</button>
<div class="writeinfo"></div>
</body>
</html>
如果您想知道这个 csrf 令牌有什么问题，请阅读 https://laravel.com/docs/5.3/csrf
If you wonder what's the matter with this csrf-token, read https://laravel.com/docs/5.3/csrf
这篇关于Laravel 5.3 中 ajax POST 的最小工作示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
