将帖子信息从 AngularJS 提交到 Laravel REST API

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27004283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 10:27:06  来源:igfitidea点击:

Submitting post information from AngularJS to Laravel REST API

angularjsrestlaravel

提问by Anonymous

I followed the following tutorial (https://code.tutsplus.com/tutorials/laravel-4-a-start-at-a-restful-api-updated--net-29785) to create a REST API with Laravel. Here we're creating a new Url which gets two inputs: a url and description and stores it to a database.

我按照以下教程(https://code.tutsplus.com/tutorials/laravel-4-a-start-at-a-restful-api-updated--net-29785)使用 Laravel 创建了一个 REST API。在这里,我们创建了一个新的 Url,它获得两个输入:一个 url 和描述,并将其存储到数据库中。

public function store()
{
    $url = new Url;
    $url->url = Request::get('url');
    $url->description = Request::get('description');
    $url->user_id = Auth::user()->id;

    $url->save();

    return Response::json(array(
        'error' => false,
        'urls' => $urls->toArray()),
        200
    );
}

In trying to teach myself AngularJS, I've been trying to connect this REST API with an AngularJS front end. Here's my form:

在尝试自学 AngularJS 时,我一直在尝试将此 REST API 与 AngularJS 前端连接起来。这是我的表格:

<form data-ng-controller="formController">
    <p>Store a URL To Read Later:</p>
    <div class="form-group">
        <input class="form-control" type="text" placeholder="Enter URL here" data-ng-   model="newurl" />
    </div>

    <p>Description:</p>
    <div class="form-group">
        <input class="form-control" type="text" placeholder="Enter a brief description" data-ng-model="newdescription" />
    </div>

    <div class="form-group text-right">
    <button class="btn btn-success" data-ng-click="submitUrl()">Add To List</button>
    </div>
</form>

The data-ng-click is calling the submitUrl function which I have defined in the FormController.

data-ng-click 正在调用我在 FormController 中定义的 submitUrl 函数。

function formController($scope, $http) {
    $scope.submitUrl = function() {
        var data = { 'url': $scope.newurl, 'description': $scope.newdescription };
        $http.post("http://readitlater.loc/api/v1/url/", data )
    }
}

I guess I'm puzzled as to how to get the input data to the public function store() and what kind of data it's expecting. Thanks for your time.

我想我对如何将输入数据获取到公共函数 store() 以及它期望什么样的数据感到困惑。谢谢你的时间。

回答by Anonymous

I figured it out. Rewriting like this, solved the problem.

我想到了。像这样重写,问题解决了。

 function formController($scope, $http) {
    $scope.submitUrl = function() {
        var data = { 'url': $scope.newurl, 'description': $scope.newdescription };
        $http({
            method: 'POST',
            url: 'http://readitlater.loc/api/v1/url/',
            headers: { 'Content-Type' : 'application/x-www-form-urlencoded'},

            data: $.param(data)
        });

回答by kozlice

AngularJS sends POST requests with application/jsontype & JSON body by default. I'm not familiar with Laravel, but looks like using Inputinstead of Requestis what you need: http://laravel.com/docs/4.2/requests#basic-input

application/json默认情况下,AngularJS 发送带有类型和 JSON 正文的POST 请求。我不熟悉 Laravel,但看起来使用Input而不是Request你需要的:http: //laravel.com/docs/4.2/requests#basic-input