如何使用 ajax 一键插入两行 Laravel

Posted 2023-02-24

技术标签:

【中文标题】如何使用 ajax 一键插入两行 Laravel【英文标题】：How to make two rows insert with one button Laravel using ajax 【发布时间】：2018-01-07 03:38:40 【问题描述】：

我想在同一个表中进行两次插入。

该表基于此字段（语言环境、project_id（外键）、标题、标题）。

控制器如下所示：

public function storeTranslation(Request $request)
        
        $projecttranslation = new ProjectTranslation();
        $projecttranslation->locale = $request->input("locale");
        $projecttranslation->project_id = $request->input("project");
        $projecttranslation->title = $request->input("title");
        $projecttranslation->caption = $request->input("caption");
        $projecttranslation->save();

目前的表格如下所示：

<div id="form2" style="display:none;" class="col-md-6"> 
  <div class="col-md-"> 
      <h3>Crear nueva traduccion</h3>
        <form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE -->
        <input type="hidden" name="_token" value=" Session::token() ">
            <div class="form-group">
              <label name="Language">Language:</label>
              <input type="text" id="locale" name="locale" value="en" class="form-control form-control-sm">
              <label name="Project">Project id:</label>
              <input type="number" id="project" name="project" class="form-control form-control-sm">
              <label name="Title">Title:</label>
              <input type="text" id="title" name="title" class="form-control form-control-sm">
              <label name="Caption">Caption:</label>
              <input type="text" id="caption" name="caption" class="form-control form-control-sm"><br>
              <input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md">
              <br><br><br>

            </div>
          </form> <!-- FIRST FORM TO TRANSLATE END HERE -->
          <form enctype="multipart/form-data" id="myFormTraduccion2" name="myFormTraduccion2"> <!--SECOND FORM TO TRANSLATE -->
           <input type="hidden" name="_token" value=" Session::token() ">
            <div class="form-group">
              <label name="title">Language:</label>
              <input type="text" id="locale" name="locale" value="es" disabled class="form-control form-control-sm">
              <label name="order">Project id:</label>
              <input type="number" id="project" name="project" class="form-control form-control-sm">
              <label name="public">Title:</label>
              <input type="text" id="title" name="title" class="form-control form-control-sm">
              <label name="caption">Caption:</label>
              <input type="text" id="caption" name="caption" class="form-control form-control-sm"><br>
              <input type="submit" value="Crear Traduccion" id="createtranslatesubmit2" class="btn btn-danger btn-md">
              <br><br><br>

            </div>
          </form>  <!--SECOND FORM TO TRANSLATE END HERE -->
  </div>
</div>

而 ajax 看起来像这样：

 $("#createtranslatesubmit").click(function()
        $("#myFormTraduccion").submit();
    );

    $("#myFormTraduccion").submit(function(e)
        e.preventDefault();
        $.ajax(
            url:'/admin/projects/postUploadTranslation',
            type:'POST',
            data:$('#myFormTraduccion').serializeArray(),
            success: function()
                $("#form2").fadeOut(1000);
                $("#form3").fadeIn(2000);
            
        );
    );

这里只用第一种形式创建，第一种翻译。

我想我应该把视图代码改成这个（数据库的每个字段有两个相同的输入）：

<div id="form2" style="display:none;" class="col-md-6"> 
  <div class="col-md-"> 
      <h3>Crear nueva traduccion</h3>
        <form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE -->
        <input type="hidden" name="_token" value=" Session::token() ">
            <div class="form-group">
              <label name="Language">Language:</label>
              <input type="text" id="locale" name="locale" value="en" class="form-control form-control-sm">
              <label name="Project">Project id:</label>
              <input type="number" id="project" name="project" class="form-control form-control-sm">
              <label name="Title">Title:</label>
              <input type="text" id="title" name="title" class="form-control form-control-sm">
              <label name="Caption">Caption:</label>
              <input type="text" id="caption" name="caption" class="form-control form-control-sm">
              <label name="title">Language:</label>
              <input type="text" id="locale" name="locale" value="es" class="form-control form-control-sm">
              <label name="order">Project id:</label>
              <input type="number" id="project" name="project" class="form-control form-control-sm">
              <label name="public">Title:</label>
              <input type="text" id="title" name="title" class="form-control form-control-sm">
              <label name="caption">Caption:</label>
              <input type="text" id="caption" name="caption" class="form-control form-control-sm"><br>
              <input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md">
              <br><br><br>

            </div>
          </form> <!-- FIRST FORM TO TRANSLATE END HERE -->
    </div>
</div>

对吗？ “存储”数据的问题，我认为将是控制器中的一个 foreach。

最后，我不知道如何在 ajax 中传递数据，也许是 formdata？

非常感谢，任何帮助将不胜感激！

【问题讨论】：

您不能有多个具有相同 ID 的 html 元素（即使它们在不同的形式中也是如此）。每个文档的 ID 必须是唯一的。您还需要将名称更改为：name="locale[]" 等。名称后面的[] 使其成为一个数组。这意味着$request->input("locale") 将返回一个数组，如：['from form 1', 'from form 2'] 【参考方案1】：

当您提交表单时，您会将特定表单的数据发送到服务器。您使用多个表单的方法在这里行不通，因为您只想发送 1 个特定表单提交的所有数据。

因此您只需创建 1 个表单并使用数字引用分隔不同的翻译。

您的 HTML（注意 -0 和 -1 用于分隔每个输入元素的 ID 和名称）：

<form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE -->
    <input type="hidden" name="_token" value=" Session::token() ">
        <div class="form-group">
          <label name="Language">Language:</label>
          <input type="text" id="locale-0" name="locale-0" value="en" class="form-control form-control-sm">
          <label name="Project">Project id:</label>
          <input type="number" id="project-0" name="project-0" class="form-control form-control-sm">
          <label name="Title">Title:</label>
          <input type="text" id="title-0" name="title-0" class="form-control form-control-sm">
          <label name="Caption">Caption:</label>
          <input type="text" id="caption-0" name="caption-0" class="form-control form-control-sm">
          <label name="title">Language:</label>
          <input type="text" id="locale-1" name="locale-1" value="es" class="form-control form-control-sm">
          <label name="order">Project id:</label>
          <input type="number" id="project-1" name="project-1" class="form-control form-control-sm">
          <label name="public">Title:</label>
          <input type="text" id="title-1" name="title-1" class="form-control form-control-sm">
          <label name="caption">Caption:</label>
          <input type="text" id="caption-1" name="caption-1" class="form-control form-control-sm"><br>
          <input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md">
          <br><br><br>

        </div>
  </form>

控制器：

public function storeTranslation(Request $request)

    $projecttranslation0 = new ProjectTranslation();
    $projecttranslation0->locale = $request->input("locale-0");
    $projecttranslation0->project_id = $request->input("project-0");
    $projecttranslation0->title = $request->input("title-0");
    $projecttranslation0->caption = $request->input("caption-0");
    $projecttranslation0->save();

    $projecttranslation1 = new ProjectTranslation();
    $projecttranslation1->locale = $request->input("locale-1");
    $projecttranslation1->project_id = $request->input("project-1");
    $projecttranslation1->title = $request->input("title-1");
    $projecttranslation1->caption = $request->input("caption-1");
    $projecttranslation1->save();

当然，它可以很容易地推广到 N 多个事务，而不仅仅是 2。

【讨论】：

改用name="thename[]" 可能更容易。然后，您可以简单地遍历 post 值，如果添加更多，则根本不需要更改控制器。不过，您仍然需要将 id 更改为您的建议。非常感谢！这个版本对我来说更容易，也许是因为我正在学习。但我认为@MagnusEriksson 的版本更具“技术性”。我会尝试两个答案，如果我有一些错误我会放在这里:) 只有一个答案，ajax 不会改变？ @LluísPuigFerrer 没错，只要您使用相同的表单 ID，ajax 就保持不变。是的，但使用name="thename[]" 更难验证，因为如果您错过了第二个翻译的可选参数并将其添加到第三个元素，那么从 php 中您将无法轻松了解该值是否属于到第二个或第三个（您的数组将只有 2 个元素）。主要看你的需求问题是：`$("#createtranslatesubmit").click(function() $("#myFormTraduccion").submit(); );`，我不需要它！谢谢您的帮助！欣赏它。【参考方案2】：

试试这个：

<div id="form2" style="display:none;" class="col-md-6"> 
<div class="col-md-"> 
  <h3>Crear nueva traduccion</h3>
    <form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE -->
    <input type="hidden" name="_token" value=" Session::token() ">
        <div class="form-group">
          <label name="Language">Language:</label>
          <input type="text" id="locale" name="ProjectTranslation[0][locale]" value="en" class="form-control form-control-sm">
          <label name="Project">Project id:</label>
          <input type="number" id="project" name="ProjectTranslation[0][project]" class="form-control form-control-sm">
          <label name="Title">Title:</label>
          <input type="text" id="title" name="ProjectTranslation[0][title]" class="form-control form-control-sm">
          <label name="Caption">Caption:</label>
          <input type="text" id="caption" name="ProjectTranslation[0][caption]" class="form-control form-control-sm">
          <label name="title">Language:</label>
          <input type="text" id="locale" name="ProjectTranslation[1][locale]" value="es" class="form-control form-control-sm">
          <label name="order">Project id:</label>
          <input type="number" id="project" name="ProjectTranslation[1][project]" class="form-control form-control-sm">
          <label name="public">Title:</label>
          <input type="text" id="title" name="ProjectTranslation[1][title]" class="form-control form-control-sm">
          <label name="caption">Caption:</label>
          <input type="text" id="caption" name="ProjectTranslation[1][caption]" class="form-control form-control-sm"><br>
          <input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md">
          <br><br><br>

        </div>
      </form> <!-- FIRST FORM TO TRANSLATE END HERE -->
</div>

因此，您将在控制器端获得 ProjectTranslation 数组

现在在控制器端

public function storeTranslation(Request $request)
    
    $form_data = $request->get('ProjectTranslation');
    foreach($form_data as $form)
        $projecttranslation = ProjectTranslation::create($form);
        $projecttranslation->save();

【讨论】：

请更改输入ID，因为它对演示并不重要，所以我保持原样。

以上是关于如何使用 ajax 一键插入两行 Laravel的主要内容，如果未能解决你的问题，请参考以下文章

如何使用带有id的ajax插入数据而不使用laravel中的表单

如何使用 laravel 通过 jquery ajax 将表单值插入数据库？

在 Laravel 中使用 Ajax 将数据插入 MySQL

如何使用 ajax 解决 Laravel Post Error 403？

Laravel 8 和 Ajax - 将数据插入表中总是刷新加载

如何使用 Laravel 和 Ajax 从数据库数组中检查复选框