Php 使用Ajax输入在Laravel中创建时存储数据透视表值

我通过创建一个食谱网站来学习拉威尔

其想法是用户创建一个配方，其中包括标题、说明和部分（和标签）的数量，然后被引导到一个新的视图，在其中添加配料

我已经完成了这项工作，用户可以成功创建配方和配料，并将其写入各自的表中，但我无法附加/同步它们

模型的相关部分：

class Recipe extends Model
{
  public function ingredients(){
    return $this->hasMany('App\Ingredient', 'recipe_ingredients');
  }
}

class Ingredient extends Model
{

  public function recipe(){
    return $this->belongsTo('App\Recipe', 'recipe_ingredients');
  }
}

$(document).ready(function(){
  $("#submit").click(function() {
    var name = $("#ingredientName").val();
    var token = $("#token").val();

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
      type: "post",
      data: "name="+name,
      dataType:'json',
      url: "{{ route('ingredients.store', ['id' => $recipe->id]) }}",
      success:function(data){
        console.log(data);
        $("#msg").html('<div class="alert alert-success my-0">'+data.name+' added</div>');
        $("#msg").toggleClass("invisible")
        $("#msg").fadeOut(2000);
        $("#ingredientsTable").append('<tr><td scope="col" class="align-middle">'+data.name+'</td></tr>');
      }
    });
  })
})

class Recipe extends Model
{
  public function ingredients(){
    return $this->hasMany('App\Ingredient', 'recipe_ingredients', 'recipe_id', 'ingredient_id');
  }

class Ingredient extends Model
{
    public function recipes(){
    return $this->belongsToMany('App\Recipe', 'recipe_ingredients', 'ingredient_id', 'recipe_id');
}

配方型号：

class Recipe extends Model
{
  public function ingredients(){
    return $this->hasMany('App\Ingredient', 'recipe_ingredients');
  }
}

class Ingredient extends Model
{

  public function recipe(){
    return $this->belongsTo('App\Recipe', 'recipe_ingredients');
  }
}

$(document).ready(function(){
  $("#submit").click(function() {
    var name = $("#ingredientName").val();
    var token = $("#token").val();

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
      type: "post",
      data: "name="+name,
      dataType:'json',
      url: "{{ route('ingredients.store', ['id' => $recipe->id]) }}",
      success:function(data){
        console.log(data);
        $("#msg").html('<div class="alert alert-success my-0">'+data.name+' added</div>');
        $("#msg").toggleClass("invisible")
        $("#msg").fadeOut(2000);
        $("#ingredientsTable").append('<tr><td scope="col" class="align-middle">'+data.name+'</td></tr>');
      }
    });
  })
})

class Recipe extends Model
{
  public function ingredients(){
    return $this->hasMany('App\Ingredient', 'recipe_ingredients', 'recipe_id', 'ingredient_id');
  }

class Ingredient extends Model
{
    public function recipes(){
    return $this->belongsToMany('App\Recipe', 'recipe_ingredients', 'ingredient_id', 'recipe_id');
}

配料型号：

class Recipe extends Model
{
  public function ingredients(){
    return $this->hasMany('App\Ingredient', 'recipe_ingredients');
  }
}

class Ingredient extends Model
{

  public function recipe(){
    return $this->belongsTo('App\Recipe', 'recipe_ingredients');
  }
}

$(document).ready(function(){
  $("#submit").click(function() {
    var name = $("#ingredientName").val();
    var token = $("#token").val();

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
      type: "post",
      data: "name="+name,
      dataType:'json',
      url: "{{ route('ingredients.store', ['id' => $recipe->id]) }}",
      success:function(data){
        console.log(data);
        $("#msg").html('<div class="alert alert-success my-0">'+data.name+' added</div>');
        $("#msg").toggleClass("invisible")
        $("#msg").fadeOut(2000);
        $("#ingredientsTable").append('<tr><td scope="col" class="align-middle">'+data.name+'</td></tr>');
      }
    });
  })
})

class Recipe extends Model
{
  public function ingredients(){
    return $this->hasMany('App\Ingredient', 'recipe_ingredients', 'recipe_id', 'ingredient_id');
  }

class Ingredient extends Model
{
    public function recipes(){
    return $this->belongsToMany('App\Recipe', 'recipe_ingredients', 'ingredient_id', 'recipe_id');
}

配料控制器

public function store(Request $request)
{

  $this->validate($request, [
    'name' => 'required|max:255'
  ]);

  $ingredient = new Ingredient;
  $ingredient->name = $request->name;
  $ingredient->save();

  $recipe = Recipe::find($request->id);

  $recipe->ingredients()->attach($recipe_id);

  $data = [
    'success' => true,
    'message'=> 'Your AJAX processed correctly',
    'name' => $ingredient->name,
    'recipe' => $recipe
  ] ;

    return response()->json($data);
}

public function store(Request $request)
{

  $this->validate($request, [
    'name' => 'required|max:255'
  ]);

  $ingredient = new Ingredient;
  $ingredient->name = $request->name;
  $ingredient->save();

  $recipe = Recipe::find($request->id);
  $recipe->ingredients()->attach($ingredient->id);

  $data = [
    'success' => true,
    'message'=> 'Your AJAX processed correctly',
    'name' => $ingredient->name,
    'recipe' => $recipe
  ] ;

    return response()->json($data);
}

如果我删除

$recipe->components（）->attach（$recipe\u id）将配料保存到配料表，但我无法将
配方id
和
配料id
保存到
配方配料表
中

我想我用的附件是错的，但我可能是错的

注意：
我并不认为这有什么区别，但我通过Ajax提交数据

脚本：

class Recipe extends Model
{
  public function ingredients(){
    return $this->hasMany('App\Ingredient', 'recipe_ingredients');
  }
}

class Ingredient extends Model
{

  public function recipe(){
    return $this->belongsTo('App\Recipe', 'recipe_ingredients');
  }
}

$(document).ready(function(){
  $("#submit").click(function() {
    var name = $("#ingredientName").val();
    var token = $("#token").val();

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
      type: "post",
      data: "name="+name,
      dataType:'json',
      url: "{{ route('ingredients.store', ['id' => $recipe->id]) }}",
      success:function(data){
        console.log(data);
        $("#msg").html('<div class="alert alert-success my-0">'+data.name+' added</div>');
        $("#msg").toggleClass("invisible")
        $("#msg").fadeOut(2000);
        $("#ingredientsTable").append('<tr><td scope="col" class="align-middle">'+data.name+'</td></tr>');
      }
    });
  })
})

class Recipe extends Model
{
  public function ingredients(){
    return $this->hasMany('App\Ingredient', 'recipe_ingredients', 'recipe_id', 'ingredient_id');
  }

class Ingredient extends Model
{
    public function recipes(){
    return $this->belongsToMany('App\Recipe', 'recipe_ingredients', 'ingredient_id', 'recipe_id');
}

表迁移

public function up()
{
    Schema::create('recipe_ingredients', function (Blueprint $table) {
        $table->integer('recipe_id')->unsigned();
        $table->foreign('recipe_id')->references('id')->on('recipes');

        $table->integer('ingredient_id')->unsigned();
        $table->foreign('ingredient_id')->references('id')->on('ingredients');
    });
}

如下例所示：

您应该附上
配料
，而不是配方：

$recipe->components（）->附加（$component\u id）

--编辑--

您的
配料
型号如下：

class Ingredient extends Model
{
  public function ingredient(){
      return $this->belongsToMany('App\Recipe', 'recipe_ingredients');
  }
}

但是，您应该改为：

public function recipes(){
    return $this->belongsToMany('App\Recipe', 'recipe_ingredients');
}

尝试将配料添加到配方时，您使用了错误的ID：

$ingredient = new Ingredient;
$ingredient->name = $request->name;
$ingredient->save();

$recipe = Recipe::find($request->id);
$recipe->ingredients()->attach($recipe_id);

在最后一行中，您已经有了配方，因此传递
$Recipe\u id
（实际上我在任何地方都没有看到定义）不是正确的逻辑

您需要做的是传递您想要添加的成分：

$recipe->ingredients()->attach($ingredient->id);

这应该可以正确地设置关系。
在做了许多小调整和更改之后，以下内容终于对我起作用了：

配方/型号：

class Recipe extends Model
{
  public function ingredients(){
    return $this->hasMany('App\Ingredient', 'recipe_ingredients');
  }
}

class Ingredient extends Model
{

  public function recipe(){
    return $this->belongsTo('App\Recipe', 'recipe_ingredients');
  }
}

$(document).ready(function(){
  $("#submit").click(function() {
    var name = $("#ingredientName").val();
    var token = $("#token").val();

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
      type: "post",
      data: "name="+name,
      dataType:'json',
      url: "{{ route('ingredients.store', ['id' => $recipe->id]) }}",
      success:function(data){
        console.log(data);
        $("#msg").html('<div class="alert alert-success my-0">'+data.name+' added</div>');
        $("#msg").toggleClass("invisible")
        $("#msg").fadeOut(2000);
        $("#ingredientsTable").append('<tr><td scope="col" class="align-middle">'+data.name+'</td></tr>');
      }
    });
  })
})

class Recipe extends Model
{
  public function ingredients(){
    return $this->hasMany('App\Ingredient', 'recipe_ingredients', 'recipe_id', 'ingredient_id');
  }

class Ingredient extends Model
{
    public function recipes(){
    return $this->belongsToMany('App\Recipe', 'recipe_ingredients', 'ingredient_id', 'recipe_id');
}

配料型号：

class Recipe extends Model
{
  public function ingredients(){
    return $this->hasMany('App\Ingredient', 'recipe_ingredients');
  }
}

class Ingredient extends Model
{

  public function recipe(){
    return $this->belongsTo('App\Recipe', 'recipe_ingredients');
  }
}

$(document).ready(function(){
  $("#submit").click(function() {
    var name = $("#ingredientName").val();
    var token = $("#token").val();

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
      type: "post",
      data: "name="+name,
      dataType:'json',
      url: "{{ route('ingredients.store', ['id' => $recipe->id]) }}",
      success:function(data){
        console.log(data);
        $("#msg").html('<div class="alert alert-success my-0">'+data.name+' added</div>');
        $("#msg").toggleClass("invisible")
        $("#msg").fadeOut(2000);
        $("#ingredientsTable").append('<tr><td scope="col" class="align-middle">'+data.name+'</td></tr>');
      }
    });
  })
})

class Recipe extends Model
{
  public function ingredients(){
    return $this->hasMany('App\Ingredient', 'recipe_ingredients', 'recipe_id', 'ingredient_id');
  }

class Ingredient extends Model
{
    public function recipes(){
    return $this->belongsToMany('App\Recipe', 'recipe_ingredients', 'ingredient_id', 'recipe_id');
}

**IngredientsController@Store:**

public function store(Request $request)
{

  $this->validate($request, [
    'name' => 'required|max:255'
  ]);

  $ingredient = new Ingredient;
  $ingredient->name = $request->name;
  $ingredient->save();

  $recipe = Recipe::find($request->id);
  $ingredient->recipes()->attach($recipe->id);

  $data = [
    'success' => true,
    'message'=> 'Your AJAX processed correctly',
    'name' => $ingredient->name,
    'recipe' => $recipe
  ] ;

    return response()->json($data);
}

我已将其更改为上述内容，但仍无法保存。用更新的控制器修改OP。它仍然保存成分，但不保存关系。您在
成分
模型上的关系不正确，我已编辑了我的答案以向您显示它应该是什么。我粘贴了错误的模型。使用正确的型号更新OP。