如何正确将此工作示例转换为使用 ajax？ （根据单选按钮选择显示详细信息）

Question

我有一个页面可以编辑帖子的管理员。

在这个页面中有一些单选按钮。每个单选按钮对应于帖子的管理员（例如：John、Jake 等）。选择单个按钮时，该管理员的详细信息（名称，电子邮件等）应在表单字段中填充。还有一个单选按钮“创建新管理员”，当被选中时应该重置表单字段。

我在没有 ajax 的情况下执行此操作，但现在我尝试复制我所拥有的但使用 ajax，即加载每个管理员详细信息并根据单选按钮选择通过 ajax 请求使用该详细信息填充表单字段。

我在视图文件中有这个 ajax 代码，但我怀疑它是否正确，以及如何在获取管理员详细信息后，使用选定的管理员/选定的单选按钮填充表单字段。你知道怎么做吗？

视图文件中的 Ajax 代码：

  <script type="text/javascript">
        $(document).ready(function () {

            $("input[name='radiobutton']").click(function() {
                let id = $(this).attr("id");

                $.get('post/edit/'+ id+ '/admins', function(administrators) {

                });
            });
        });
    </script>

下面是没有 Ajax 的完整工作代码示例：

视图文件中的表格：

<form method="post" class="clearfix" action="{{route('admins.update', ['id' => $post->id])}}" enctype="multipart/form-data">
    {{csrf_field()}}
    @foreach($administrators as $admin)
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radiobutton" id="{{$admin->id}}" value="{{$admin->id}}">
            <label class="form-check-label" for="">
              {{$admin->name}}
            </label>
          </div>
    @endforeach
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radiobutton" id="create_administrator"
             value="option2">
      <label class="form-check-label" for="exampleRadios2">
          Create new administrator
      </label>
  </div>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" required class="form-control" value="{{ $admin->name }}" name="name">
  </div>

  <!-- below I have more form fields like administrator name, email, etc -->

  <input type="submit" id="adminStoreButton" class="btn btn-primary" value="Create"/>
  <input type="submit" id="adminUpdateButton" class="btn btn-primary" value="Update"/>
  </form>

JS 根据单选按钮（管理员）选择填充表单字段：

 $(document).ready(function () {

        $("#adminStoreButton").hide();

        var admins = {!!  $admin !!}

        $("input[name='radiobutton']").click(function() {

            if($(this).attr("id") == "create_administrator"){
                $("#adminUpdateButton").hide();
                $("#adminStoreButton").show();
                $("#edit_administrator").attr('action', '{{route('admins.store', ['post_id' => $post->id])}}');
            }
            else{
                $("#adminUpdateButton").show();
                $("#adminStoreButton").hide();
                $("#edit_administrator").attr('action', '{{route('admins.update', ['post_id' => $post->id])}}');

            }

            let id = $(this).attr("id");
            let data = admins.find(e => e.id == id) || {
                name: "",
                email: "",
                ...
            };

            $("input[name='name']").val(data.name);
            $("input[name='email']").val(data.email);
           ...            
        });
    });

管理员控制器编辑方法，返回带有上述编辑管理员表单的视图：

public function edit($id)
{
    $post = Post::find($id);
    $administrators = Administrator::where('post_id', $id)->get();

    return view('administrators.edit')
        ->with('post', $post)
        ->with('administrators', $administrators));
}

编辑和更新路线

Route::get('post/edit/{id}/admins',    [ 'uses' => 'AdminController@edit', 'as'=>'admins.edit']);
Route::post('post/update/{id}/admins', [ 'uses' => 'AdminController@update', 'as'=>'admins.update']);

管理员控制器更新方法：

public function update(Request $request, $id){

        $this->validate($request, [
            'name' => 'required|string',
          ...
        ]);

        $adminToUpdate = Administrator::find($request->radiobutton);

        $adminToUpdate->name = $request->name;
        ...

        $adminToUpdate->save();

        return redirect()->back();
    }
}

Answer 1

你的标记和脚本看起来不干净也让一切变得复杂，所以我会一步一步告诉你如何以最好的方式完成这个

1) 创建一个表单标记，一旦通过 ajax 查询就会被填充

如下所示

<form class="myForm" action="">
   <input type="text" name="firstname" value="">
   <input type="text" name="lastname" value="">
   ... and so on...
 <button class="actionButton" type"button" data-action="create">update</button>
</form>

2) 您需要一个功能来查询管理员，如下所示

function queryAdmin(id){
   $('.myForm')[0].reset();
   return $.post(queryEndPoint, {id: id}, function(response){
       $('.actionButton').attr('data-action', 'update');
       $('.myForm').find('input[name="firstname"]').val(response.firstname);
       $('.myForm').find('input[name="lastname"]').val(response.firstname);
       .... and so on ....
   });
}

3) 现在是获取管理员列表的 for 循环

@foreach($administrators as $admin)
      <button class="adminButton btn" data-id="{{ $admin->id }}"></button>
@endforeach

4) 现在代码在单击按钮时查询管理员

$('.adminButton').click(function(){
    queryAdmin($(this).attr('data-id'));
});

这将在表单中填写管理员详细信息

5) 现在更新/创建表单功能

function updateOrCreate(endPoint){ 
    $('.updateMe').click(function(){
       $.post(endPoint, $('.myForm').serialize(), function(){
          alert('done');
       }).fail(function(){
          alert('something error occured !!!');
       });
    });
   }

6) 更新或创建操作

$('.actionButton').click(function(){
   if($(this).attr('data-action') == 'update')
      updateOrCreate(updateEndpoint);
   else
      updateOrCreate(createEndpoint);
});

现在它会在向管理员查询时提交带有更新请求的表单

现在我希望你能以这种方式休息，祝你好运