如何正确转换此工作示例以使用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);
});

现在，一旦查询admin

，它将提交包含更新请求的表单

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