AngularJS 2.0-将数据发布到Laravel方法

比如说，我用Laravel构建了一个API，允许在数据库中索引和存储英雄

这就是我的存储方法在我的laravel hero控制器中的外观：

public function store(Request $request)
    {

        $hero = new Hero;
        $hero->name = $request->name;
        $hero->description = $request->description;
        $hero->avatar = "None";
        $hero->save();

        $heroes = Hero::paginate(5);
        return view('/heroes/index', [
        'heroes' => $heroes
    ]);
    }

上面的方法将请求数据发送到数据库中的正确字段

我的问题是：如何操作表单数据并将其发送到此方法，以及如何使用Angular 2.0获取返回的结果

换句话说：我如何使用Angular 2.0处理我的laravel API

这是我的angular2.0方法，用于显示英雄列表：

getHeroes() {
      this.http.get('http://127.0.0.1/heroWorld/public/api/v1/heroes')
      .map((res:Response) => res.json())
      .subscribe(
        data => { this.heroes = data;
        },
        err => console.error(err),
        () => console.log('done');
      );
  }

所以。。如何从我的角度创建一个

    addHero() {

      let headers = new Headers();
    headers.append('Content-type', 'application/x-www-form-urlencoded');

    let formPayload = new URLSearchParams();
    formPayload.set('name', name);
    formPayload.set('description', description);

       this.http.post('http://127.0.0.1/heroWorld/public/heroes', formPayload.toString(), { headers: headers })
  .map((res:Response) => res.json())
  .subscribe(
        data => { this.heroes = data;
        },
        err => console.error(err),
        () => console.log('done');
      );
  }

错误：

加载资源失败：服务器响应状态为500（内部服务器错误）

我的角形：

<form method="post">
    Hero name: <input type="text" name="name" [ngModel]="name"><br/>
    Hero description: <input type="text" name="description" [ngModel]="description">
    <button (click)="addHero()" class="btn btn-primary">Add this hero!</button>
    </form>

英雄名字：

英雄描述：
加上这个英雄！

我的laravel工作表：

<!-- New Hero Form -->
        <form action="http://127.0.0.1/heroWorld/public/heroes" method="POST" class="form-horizontal">
            <input type="hidden" name="_token" value="knUS8vUxihTj4YJhjVkqmRBJJkVDDCABIZaRwXhN">

            <!-- Hero Name -->
            <div class="form-group">
                <label for="hero-name" class="col-sm-4 control-label">Hero Name</label>

                <div class="col-sm-6">
                    <input type="text" name="name" id="hero-name" class="form-control">
                </div>
            </div>

            <!-- Hero Description -->
            <div class="form-group">
                <label for="hero-description" class="col-sm-4 control-label">Hero Description</label>

                <div class="col-sm-6">
                    <input type="text" name="description" id="hero-description" class="form-control">
                </div>
            </div>

            <!-- Add Hero Button -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-default">
                        <i class="fa fa-plus"></i> Add Hero
                    </button>
                </div>
            </div>
        </form>

英雄名字
英雄描述
添加英雄

首先，要以角度向laravel发送数据，您需要将请求从get to post更改

getHeroes() {
  this.http.post('http://127.0.0.1/heroWorld/public/api/v1/heroes')
  .map((res:Response) => res.json())
  .subscribe(
    data => { this.heroes = data;
    },
    err => console.error(err),
    () => console.log('done');
  );

}

在laravel store函数中，您需要发送json响应，因为您正在使用json格式的api

public function store(Request $request)
{

    $hero = new Hero;
    $hero->name = $request->name;
    $hero->description = $request->description;
    $hero->avatar = "None";
    $hero->save();

    $heroes = Hero::paginate(5)->toArray();
    return response()->json($heroes);
]);
}

---

要使用JSON负载发送请求，请执行以下操作：

var headers = new Headers();
headers.append('Content-Type', 'application/json');

var obj = {
  name: this.name,
  description: this.description,
  '_token': this.token
};

 this.http.post('http://127.0.0.1/heroWorld/public/api/v1/heroes', JSON.stringify(obj), { headers: headers })
  .map((res:Response) => res.json())
  .subscribe(
    data => {
      this.heroes = data;
    },
    err => console.error(err),
    () => console.log('done');
  );

不要忘记将Headers类与Http类一起导入：

import { Http, Headers } from 'angular2/http';

编辑

如果要发送表单，请使用以下命令：

let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');

let formPayload = new URLSearchParams();
formPayload.set('name', this.name);
formPayload.set('description', this.description);
formPayload.set('_token', this.token);
 this.http.post('http://127.0.0.1/heroWorld/public/api/v1/heroes', formPayload.toString(), { headers: headers })
  .map((res:Response) => res.json())
  .subscribe( ... );

以及相应的表格：

<form>
  <input type="hidden" name="_token" [ngModel]="token"
         value="knUS8vUxihTj4YJhjVkqmRBJJkVDDCABIZaRwXhN">
  Hero name: <input type="text" name="name" [ngModel]="name"><br/>
  Hero description: <input type="text" name="description" [ngModel]="description">
  <button (click)="addHero()" class="btn btn-primary">Add this hero!</button>
</form>

英雄名字：

英雄描述：
加上这个英雄！

AngularJS获取

500（内部服务器错误）

，我认为因为没有数据发送到我的laravel api。如何将表单数据发送到api？您的答案中没有提到任何表单输入数据。这是我的表格：

英雄名字：
英雄描述：添加这个英雄！

。AddHero（）方法与您的注释代码非常相似。我用angular2中的postáform更新了我的答案。请随意告诉我这是否符合您的需要。为了获得名为“name”的表单输入，我应该如何替换“some name”？您可以在输入上设置ngModel属性：。然后可以使用someField属性：formPayload.set（'name'，someField）；现在我得到

原始异常：ReferenceError:formPayload未定义

。在我的主要帖子上更新了我的addHero（）方法。AngularJS获得

500（内部服务器错误）

，我想是因为没有数据发送到我的laravel api。如何将表单数据发送到api？您的答案中没有提到任何表单输入数据。这是我的表格：

英雄名字：
英雄描述：添加这个英雄！

。AddHero（）方法与注释的代码非常相似。请检查路由路径是否正确。您的路由文件“/heroWorld/public/api/v1/heros”中是否有此内容？我将其更改为正确的URL，是的，我的路由文件中确实有此内容。如果我没有，我想它会返回404。