使用带有 AJAX 的表单更新表格

问：

我是Laravel的新手，我正在尝试使用Ajax调用更新数据表。表中的“rent”字段应该是唯一可以编辑的字段，但到目前为止，我仍无法将更改保留到数据库中。我目前收到的错误指出我的“租金”指数未定义，我不明白这一点，因为租金字段的当前数据显示在表中 - 只有当我尝试更新此字段时，才会出现错误。使用 Ajax 时，“rent”字段似乎无法识别，并且我收到错误消息“undefined index： 'rent''”。当我尝试在没有 Ajax 的情况下更新表时，我收到的错误消息是“SQLSTATE[23000]：完整性约束冲突：1048 列'rent'不能为空”。为了清楚起见，我将包括我的代码片段 - 对此问题的任何帮助，或有关如何更好地实现我的目标的建议将不胜感激！

索引页（数据表的表单）

<div class="flex justify-end content-end items-end mt-4">
  <button type="button" class="shadow md:shadow-lg rounded-full mr-4 font-bold px-10 grantors-btn text-white">
    <img class="inline-block mb-2 mt-2 w-4 h-4 mr-2" src="../../img/Icon-plus-white.png" alt="plus icon">
    <a class="no-underline inline-block text-white " onclick="toggleModal('modal-example-small')">New Apparatus Code</a>
  </button>
</div>
<table id="datatable" class="stripe hover dt-responsive display nowrap" style="width:100%; padding-top: 1em;  padding-bottom: 1em;">
      <thead>
        <tr>
          <th>ID</th>
          <th >Apparatus Code</th>
          <th>Description</th>
          <th>Rent</th>
          <th></th>
        </tr> 
      </thead>
<!--start of for loop-->

@foreach ($apparatusCodes as $apparatusCode)

      <tbody>
<form method="POST" action= "{{ route('apparatus_codes.update' , $apparatusCode->id )}}" class="is-readonly" > 
                @csrf
                @method('PUT')


         <tr id="table{{ $apparatusCode->id}}" data-target=".table{{ $apparatusCode->id}}"> 
          <td class="main-bg"> {{ $apparatusCode->id}} </td>
          <td class="main-bg">{{ $apparatusCode->apparatus_code}} </td>  
          <td class="main-bg"> {{ $apparatusCode->description}}</td>
          <td class="data main-bg" id ="rent" name ="rent" value = "{{ $apparatusCode->rent}}">{{ $apparatusCode->rent}}</td>
                        
          <td class="main-bg"> <img class="mb-1 duration-300  h-6 w-6" 
            src="../img/Icon-arrow-dropdown-white.png" data-toggle="collapse" data-target=".table{{ $apparatusCode->id}}" alt="arrow down"/></a>
          </td>
          <td><button type="button" id="edit-button" class="edit"><img class="mb-1 duration-300 ml-4 inset-0 h-6 w-6" src="../img/edit-icon.svg" alt="edit"></button>
          <button id="save-button" class="save"><img class="mb-1 duration-300 ml-4 inset-0 h-6 w-6" src="/../../img/save-icon.svg" alt="save icon"></button>
      </div>
        <div class="row">
            @if ($errors->any()) <span>{{ $errors }}</span> @endif
        </div>
        </td>

      </form>

索引页（Ajax 调用）

<script>
        $(document).ready(function(){

    $(document).on("click", "#save-button", function() { 
        var url = "{{ route('apparatus_codes.update' , $apparatusCode->id )}}";
        var rent = $("#rent").val();
        console.log(rent);
        $.ajax({
            url: url,
            type: "POST",
            cache: false,
            data:{ 'rent':rent
                

            },
            success: function(dataResult){
                dataResult = JSON.parse(dataResult);
             if(dataResult.statusCode)
             {
                window.location = "{{ route('apparatus_codes.index' , $apparatusCode->id )}}";
             }
             else{
                 alert("Internal Server Error");
             }
                
            }
        });
    }); 
});

    </script>

控制器中的 Upadate 方法

public function update(ApparatusCodesRequest $request, $id)
    {
    
        $validated = $request->validated();
         // find selected apparatus code details
         $apparatusCodes = ApparatusCodes::find($id);
         $apparatusCodes->rent = $request->input('rent');

        
        //$rent = $_POST['rent'];
         if (empty($rent)) {
           echo "Rent is empty";
         } else {
        echo 'rent is'. $_POST['rent'];
         }

路由文件

Route::post('/apparatus_codes/{id}', [App\Http\Controllers\ApparatusCodesController::class, 'update'] )->name('apparatus_codes.update');