Laravel 5.2 添加 ajax答案

【问题标题】：Laravel 5.2 adding ajaxLaravel 5.2 添加 ajax
【发布时间】：2016-04-28 14:32:35
【问题描述】：

我有以下使用 get 和 post 请求的 laravel 代码，它有效。我正在尝试为此添加ajax，但我很挣扎。我将如何为此添加ajax？

这是视图中的代码。

<form action="goal" method="post">
<input name="usersID" type="form"> usersID </input> <br>
<input name="goalValue" type="form"> goal </input> <br>
<input name="goalpoints" type="form"> goalpoints </input> <br>
<input name="points" type="form"> points </input> <br>
<input name="activitiesID" type="form"> activitiesID </input> <br>
<button type="submit"> Submit </button>
</form>

这是路由中的代码

Route::get("goal", "PagesController@getGoal");
Route:: post("goal",
["as" => "goal",
"uses" => "tableController@getGoal"]);

这是控制器中的代码
//控制器1

public function getGoal() 
{
return view("pages.goal");
}

//控制器2

public function getGoal()
{
$usersID = $_POST["usersID"];
$goal = $_POST["goalValue"];
$goalpoints = $_POST["goalpoints"];
$points = $_POST["points"];
$activitiesID = $_POST["activitiesID"];

DB :: table("goals") -> insert
(
array("usersID" => $usersID, "goal" => $goal, "goalpoints" => $goalpoints,  "points" => $points,
"activitiesID" => $activitiesID)
 );
 return view("pages.goal");
 }

【问题讨论】：

有几个选项 - 一个选项是导入 jQuery 并使用内置的 $.get](https://api.jquery.com/jquery.get/) and [$.post 方法
我已经尝试过两种方法，但是 jQuery 答案会很好，因为它可以与不同的浏览器一起使用
@Crwydryn 提供的答案很好。顺便说一句，我会尝试稍微不同地命名控制器中的方法。例如，控制器 2 中的 getGoal（我假设是 tableController）可能应该被重命名，因为它 sets 是目标（可能类似于 setGoal()）。当控制器开始变得更复杂时，这可能有助于减少混乱。只是一个想法。
我还可以建议您查看Laravels Request 类文档并使用它而不是$_POST['variableName'] - 它比直接使用$_POST 更安全，并且具有一些不错的功能。

标签： php jquery ajax laravel

【解决方案1】：

假设您对 JQuery/Javascript 的了解有限（如果不是，请原谅我），我将比现有答案更详细一点。

我将首先在您的表单中添加ID。

<form action="goal" method="post" id="goalForm">

接下来我会查看CSRF documentation on Laravel，否则您可能会收到与“令牌不匹配”相关的错误。简而言之，您需要做两件事之一：

将<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>"> 也添加到您的所有表单中。
在您的<head> 部分添加<meta name="csrf-token" content="<?= csrf_token() ?>">。

如果选项 2，您还需要将此 javascript 添加到模板的底部：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

这会将您的令牌添加到您的所有 AJAX 请求中。

接下来使用 JQuery 处理表单提交。

$('#goalForm').submit(function(e){

    // I have passed in the event 'e' and preventing default browser functionality. 
    e.preventDefault();

    var formData = $(this).serialize(); //Get the form data and put in a structure i can send

    $.post('goal', formData).done(function(response){
        // after the ajax is done, do something with the response
        alert(response);
    });
});

你的控制器方法需要返回一些东西（假设控制器 2）：

public function getGoal()
{
    $usersID = $_POST["usersID"];
    $goal = $_POST["goalValue"];
    $goalpoints = $_POST["goalpoints"];
    $points = $_POST["points"];
    $activitiesID = $_POST["activitiesID"];

    try{
        DB::table("goals")->insert(
            array("usersID" => $usersID, "goal" => $goal, "goalpoints" => $goalpoints,  "points" => $points, "activitiesID" => $activitiesID)
        );
    } catch (\Exception $e) {
        echo "something went wrong";
    }
    echo "Awesome it worked";
}

我添加了一个 try/catch 以防您的数据库插入失败。也只是为了测试目的而回显，您可以稍后更新。

【讨论】：

不用担心我对两者的了解有限。我已按照您的指示进行操作，但没有收到任何提醒。
这可能是因为您的控制器方法没有返回任何内容。我会更新更多细节
谢谢。当我提交表单时，处理发布请求的控制器应该返回视图“pages.goal”。我很确定这部分工作正常。
好吧，使用 AJAX 页面不会重新加载。因此，发回与当前加载的视图相同的视图将毫无意义。
我将其更改为一个值，但也不起作用

【解决方案2】：

根据我的评论，您可以通过 jQuery 的 $.get 和 $.post 方法使用 jQuery 来执行此操作（还有其他选项不需要您下载 jQuery）。

这是一个使用 jQuery 进行 get 的示例：

$.get( "goal", function( data ) {
  //this is called when a successful get request is made. The server response is in the data object
});

【讨论】：

所以我试图在视图文件中执行此操作，并且我不需要路由中的任何内容，并且警报应该在获取请求时触发？ $.get("目标", function(data)) { alert("test"); });
好吧，我个人会将脚本放在它自己的文件中——关注点分离等等——你需要在你的视图中引用 jQuery 框架（如果你决定分离它，还需要引用脚本文件out) - 使用 Google CDN 或类似的 jQuery，或将文件拉入您的项目并在本地引用它