Laravel 8不使用JavaScript能否填充表单输入并实现按钮点击增删改功能？

我从RestAPI获取了数据，这些数据由控制器类获取得到。我希望通过点击按钮完成数据的新增、更新、删除操作，需要在同一个标签页内使用4个按钮实现动态操作，请问能否不使用JavaScript实现该需求？

我的getHost方法如下：

public function getHost(){
    $enpoint="api/hosts/getHost";

    $api= new ApiAuthController();
    $url=$api->getUrl();
    $headers=$api->getHeaders();
    $url.=$enpoint;

    $response = Http::withHeaders($headers)->post($url,[
        'id'=>"11",
        'hostname'=>"",
        'address'=>"",
        'mail'=>"",
        'web'=>"",
        'owner'=>"",
        'contactperson'=>"",
        'mapinfo'=>"",
        'nimage'=>"",
        'description'=>"",
        'telephone'=>"",
    ]);

    $decode=json_decode( $response->getBody());
    $response=$decode->responseData;
    $data['hostname']=$response->hostname;
    $data['address']=$response->address;
    $data['mail']=$response->mail;
    $data['web']=$response->web;
    $data['owner']=$response->owner;
    $data['contactperson']=$response->contactperson;
    $data['mapinfo']=$response->mapinfo;
    $data['nimage']=$response->nimage;
    $data['description']=$response->description;
    $data['telephone']=$response->telephone;

    return view('pages.host',$data);
}

可以实现，不需要依赖JavaScript，依靠原生HTML表单提交+服务端渲染逻辑即可满足需求，具体实现步骤如下：

• 第一步：新增操作处理路由
  在路由文件中新增POST类型路由，绑定到控制器的操作处理方法，用来接收按钮提交的动作请求。示例（Laravel框架）：

  Route::post('/host/operate', [HostController::class, 'operateHost'])->name('host.operate');
  

• 第二步：改造pages/host视图文件，给四个按钮各自包裹独立表单
  每个表单通过隐藏字段区分操作类型，提交后会自动重载当前页面渲染最新数据，不需要跳转其他页面：

  <!-- 新增按钮 -->
  <form action="{{ route('host.operate') }}" method="POST">
      @csrf
      <input type="hidden" name="action" value="add">
      <!-- 其他需要提交的新增字段可以放这里的隐藏input或者表单输入框 -->
      <button type="submit">新增</button>
  </form>
  
  <!-- 更新按钮 -->
  <form action="{{ route('host.operate') }}" method="POST">
      @csrf
      <input type="hidden" name="action" value="update">
      <input type="hidden" name="id" value="11">
      <!-- 要更新的字段值放这里 -->
      <button type="submit">更新</button>
  </form>
  
  <!-- 删除按钮 -->
  <form action="{{ route('host.operate') }}" method="POST">
      @csrf
      <input type="hidden" name="action" value="delete">
      <input type="hidden" name="id" value="11">
      <button type="submit">删除</button>
  </form>
  
  <!-- 查询按钮 -->
  <form action="{{ route('host.operate') }}" method="POST">
      @csrf
      <input type="hidden" name="action" value="query">
      <button type="submit">查询</button>
  </form>
  

• 第三步：控制器新增operateHost方法处理各类操作
  根据提交的action参数调用对应RestAPI接口，操作完成后重新查询最新数据，返回原视图即可：

  public function operateHost(Request $request)
  {
      $api= new ApiAuthController();
      $headers=$api->getHeaders();
      $baseUrl = $api->getUrl();
      $action = $request->input('action');
  
      switch ($action) {
          case 'add':
              $endpoint = "api/hosts/addHost";
              $params = [
                  // 从请求中取新增的字段
                  'hostname' => $request->input('hostname'),
                  'address' => $request->input('address'),
                  // 其他字段按需补充
              ];
              break;
          case 'update':
              $endpoint = "api/hosts/updateHost";
              $params = [
                  'id' => $request->input('id'),
                  // 其他要更新的字段
              ];
              break;
          case 'delete':
              $endpoint = "api/hosts/deleteHost";
              $params = [
                  'id' => $request->input('id'),
              ];
              break;
          case 'query':
          default:
              // 复用原有的查询逻辑
              return $this->getHost();
      }
  
      // 调用对应操作接口
      Http::withHeaders($headers)->post($baseUrl.$endpoint, $params);
  
      // 操作完成后重新查询最新数据，返回原视图
      return $this->getHost();
  }
  

注意：该方案每次点击按钮都会触发页面重载，如果需要无刷新体验才需要用到JavaScript。

内容的提问来源于stack exchange，提问作者Starrk