从 Angular 向 Laravel 发送数据答案

【问题标题】：Sending data from Angular to Laravel从 Angular 向 Laravel 发送数据
【发布时间】：2016-04-09 05:33:23
【问题描述】：

好的，所以我又卡住了。我正在使用 Laravel 和 Angular 做一个待办事项列表应用程序。我可以通过 Laravel 和 Angular 控制器从数据库中获取数据，但是当我尝试写入数据时，我无法让它工作。

所以我有一个表单，使用ng-submit 发布数据。当我在 Angular 控制器中将数据记录到控制台时，表单中的数据是正确的。但是当我尝试将它传递给 Laravel 控制器时，我卡住了。

我无法找出问题所在，浏览网络以获取答案并没有帮助我。

Laravel 路线：

<?php
Route::get('/', function () {
    return view('index');
});
Route::get('/notes', 'NoteController@index');
Route::delete('/notes', 'NoteController@destroy');
Route::post('/notes', 'NoteController@store');
//Route::post('/notes', 'NoteController@update');
Route::get('/projects', 'ProjectController@index');
Route::get('/users', 'UserController@index');
Route::group(['middleware' => ['web']], function () {
    //
});
?>

Laravel 控制器：

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Note;
use App\User;
use App\Project;
use Input;
use Response;
use Redirect;
class NoteController extends Controller
{
    public function index()
    {
        try {
            $statusCode = 200;
            $notes = Note::where('removed', 0)->get()->toArray();
            $response = [];
            foreach ($notes as $note) {
                $user = User::find($note['user_id']);
                $project = Project::find($note['project_id']);

                $this_row = array(
                    'id' => $note['id'],
                    'user' => $user['uname'],
                    'project' => $project['pname'],
                    'content' => $note['content'],
                    'completed' => $note['completed'],
                    'removed' => $note['removed'],
                    'created' => $note['time_created'],
                    'deadline' => $note['time_deadline']
                );
                $response[] = $this_row;
            }
        } catch (Exception $e) {
            $statusCode = 400;
        } finally {
            return Response::json($response, $statusCode);
        }
    }

    public function store()
    {
        $note = Input::json()->get()->toArray();
        var_dump($note);
        /*
        $note->user_id = $note['user'];
        $note->project_id = $note['project'];
        $note->content = $note['content'];
        $note->time_deadline = $note['deadline'];
        $note->save();*/
    }
}

class ProjectController extends Controller
{
    public function index()
    {
        try {
            $statusCode = 200;
            $projects = Project::orderBy('pname', 'asc')->get()->toArray();
            $response = [];
            foreach ($projects as $project) {
                $this_row = array(
                    'id' => $project['id'],
                    'name' => $project['pname'],
                );
                $response[] = $this_row;
            }
        } catch (Exception $e) {
            $statusCode = 400;
        } finally {
            return Response::json($response, $statusCode);
        }
    }
}

class UserController extends Controller
{
    public function index()
    {
        try {
            $statusCode = 200;
            $users = User::orderBy('uname', 'asc')->get()->toArray();
            $response = [];
            foreach ($users as $user) {
                $this_row = array(
                    'id' => $user['id'],
                    'name' => $user['uname'],
                );
                $response[] = $this_row;
            }
        } catch (Exception $e) {
            $statusCode = 400;
        } finally {
            return Response::json($response, $statusCode);
        }
    }
}

角度控制器：

angular.module('todoApp', []).controller('MainController', function($scope, $http) {
    var thisApp = this;

    $http({method : 'GET', url : 'http://localhost:8000/notes'})
        .then (function(response) {
            thisApp.todos = response.data;
        }, function() {
            alert("Error getting todo notes");
        });

    $http({method : 'GET',url : 'http://localhost:8000/users'})
        .then(function(response) {
            thisApp.users = response.data;
        }, function() {
            alert("Error getting users");
        });
    $http({method : 'GET', url : 'http://localhost:8000/projects'})
        .then(function(response) {
            thisApp.projects = response.data;
        }, function() {
            alert("Error getting projects");
        });
    thisApp.addTodo = function(note) {
        console.log($scope.note);
        $http({
            method : 'POST', 
            url : 'http://localhost:8000/notes',
            data : $.param($scope.note),
            headers : {'Content-Type': 'application/x-www-form-urlencoded'}
        });
    };
});

HTML：

<!doctype html>
<html ng-app="todoApp">
    <head>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="/js/MainController.js"></script>
    </head>
    <body ng-controller="MainController as myControl">
        <h2>Todo</h2>
        <div>
            <table>
                <tr>
                    <th>Note:</th>
                    <th>Author:</th>
                    <th>Project:</th>
                    <th>Created:</th>
                    <th>Deadline:</th>
                </tr>
                <tr ng-repeat="todo in myControl.todos">
                    <td> {{ todo.content }} </td>
                    <td> {{ todo.user }} </td>
                    <td> {{ todo.project }} </td>
                    <td> {{ todo.created }} </td>
                    <td> {{ todo.deadline }} </td>
                    <td><button>Update</button></td>
                    <td><button>Delete</button></td>
                </tr>
            </table>
        </div>
        <h2>Add new:</h2>
        <div>
            <form ng-submit="myControl.addTodo()">
                User:<br/>
                <select ng-model="note.user">
                    <option ng-repeat="user in myControl.users" value="{{ user.id }}">{{ user.name }}</option>
                </select><br/>
                Project:<br/>
                <select ng-model="note.project">
                    <option ng-repeat="project in myControl.projects" value="{{ project.id }}">{{ project.name }}</option>
                </select><br/>
                Note:<br/>
                <textarea rows="5" cols="30"  ng-model="note.content"></textarea><br/>
                Deadline (format YYYY-MM-DD HH:MM):<br/>
                <input type="text" ng-model="note.deadline" /><br/>
                <input type="submit" value="Add" />
            </form>
        </div>
    </body>
</html>

结果可以在这张图片中看到：http://imgur.com/60hIzSb

我不知道我做错了什么。我想我的问题出在 addTodo 函数中的 Angular 控制器中，但我真的不知道。有什么建议吗？

我还想知道是否有人知道如果我想使用 PUT 方法创建新笔记，除了将 method : 'POST' 更改为 method : 'PUT' 之外，我是否需要做任何其他事情？

【问题讨论】：

你能得到console.log吗？您确定单击提交按钮后页面没有刷新吗？
Angular 控制器中的 @RayonDabre console.log($scope.note); 给出以下内容：Object {user: "1", project: "2", deadline: "2015-12-31 00:05:00", content: "sadasd"} 我认为这是正确的。我不知道我是否刷新，但我不这么认为。
500 Internal Server 因为它说您的服务器端编码有错误。请查看并修复它
500，它可能是csrf 或服务器上的东西。
在 Chrome 开发者工具中打开“网络”选项卡并查看对您请求的响应以获取确切的错误消息。您还可以查看 storage/logs 文件夹中的日志以获取错误消息。

标签： javascript php angularjs laravel url-routing

【解决方案1】：

感觉跟这个有关系：

$note = Input::json()->get()->toArray();
var_dump($note);

在 Angular 中，您发送的是表单编码数据而不是 json。而且我相信 Laravel 无论如何都会自动解码收到的 json，所以这应该可以工作：

$note = Input::all();
var_dump($note);

【讨论】：

【解决方案2】：

如果是 CSRF 令牌，则将 CSRF TOKEN 注入到您的视图中

   angular.module("todoApp").constant("CSRF_TOKEN", '{!! csrf_token() !!}');

并在标头中向您的 addTodo 函数传递令牌....

 thisApp.addTodo = function(note) {
    console.log($scope.note);
    $http({
        method : 'POST', 
        url : 'http://localhost:8000/notes',
        data : $.param($scope.note),
        headers : {'Content-Type': 'application/x-www-form-urlencoded',
                               'x-csrf-token': CSRF_TOKEN}
    });

【讨论】：