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

Question

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

该表基于这些字段(语言环境、project_id(外键)、标题、标题)。

Controller 如下所示:

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);
            }
        });
    });

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

我想我应该将 View 代码更改为这个(数据库的每个字段有两个相同的输入):

<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>

是吗？ “存储”数据的问题，我认为将是 Controller 中的 foreach。

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

非常感谢，我们将不胜感激!

Answer 1

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

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

您的 HTML(注意用于分隔每个输入元素的 ID 和名称的 -0 和 -1):

<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>

Controller :

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 次。