Laravel 5.4 - 如何在 javascript 加载之前使 @section 屈服

Question

我正在使用 javascript 动态创建一个表单，该表单从聊天中获取答案并将其添加到表单中。该表单存在于单独的刀片文件register.blade.php 中。我在主页 (index.blade.php) 中生成了表单，但 @section('registration-form') 在读取 js 之前生成了页面。出于这个原因，来自聊天的答案永远不会输入到表单中。

register.blade.php 持有（自定义）表单@section('registration-form')。从那里我想在routes/web.php 中创建一个route::get('/index', 'CustomAuthController') 来将表单数据存储在我的数据库中。关于如何完成这项工作的任何想法？

对 Laravel 非常陌生。使用 Laravel 5.4。

代码：

布局/app.blade.php

@include('includes.head')

<body>        
    @include('includes.navbar')
    <div class="container">
        @yield('content')
    </div>
    @include('includes.footer')
</body>

index.blade.php

@extends('layouts.app') 

@section('content')

<main>      
  <section class="row" >    

     <!------ a bunch of content here ----------->

     <!----- form yielded here -------->

         @yield('registration-form')

     <!--- form end ----->
     <!------ more content -------->
  </section>
</main>
@endsection

register.blade.php

@section('registration-form')

<div class="padding-32" id="signup-two">
<h4>Review and submit your information</h4>
<form  method="POST" action="{{ route('signup') }}">
  {{ csrf_field() }}

  <div class="form-group" id="fname">
   <label></label>
   <input name="fname"/>
  </div>

  <div class="form-group" id="email">
   <label></label>
   <input name="email"/>
  </div>
  <div class="form-group" id="password">
   <label></label>
   <input name="password"/>
  </div>
  <div class="form-group" id="BMI">
   <label></label>
   <input name="BMI"/>
  </div>
  <div class="form-group" id="height">
   <label></label>
   <input name="height"/>
  </div>
  <div class="form-group" id="weight">
   <label></label>
   <input name="weight"/>
  </div>
</form>

@endsection

我尝试在app.blade.php 中生成@section(registration-form)，但表单仍然没有加载。我也不知道如何为此创建路由和控制器。代码如下所示：

布局/app.blade.php

@include('includes.head')

  <body>

    @include('includes.navbar')
    <div class="container">
        @yield('content')
        @yield('registration-form')
    </div>
    @include('includes.footer')
  </body>
</html>

路由/web.php

Route::get('/index', function () {
  return view('registration-form', [
   'fname' => 'fname',
   'BMI' => 'BMI',
   'height' => 'height',
   'weight' => 'weight'
   ]);
});

Answer 1

Javascript 通常在 dom 准备好时加载。

但是您想在特定的 DOM (@yield(form)) 元素准备好之前加载脚本。

所以你必须做一些类似“laravel load view using ajax”的事情，周围已经有一些实际的例子。 How can I return a view from an AJAX call in Laravel 5?

你想为 Ajax 调用创建一个路由器，控制器函数返回部分视图（因此@section('form')）。在您的 js 中准备好必要的代码后调用 ajax。然后将视图附加到所需位置。没有捷径可走。

您可能想重新考虑您现在要完成的任何设计。

对于数据操作、计算等。如果可以由后端完成和验证，只需将它们发送到后端即可。一个常见的错误是前端试图处理后端任务。