使用 AJAX 更新表格

Question

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

索引页面（数据表的表单）

<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>

控制器中的更新方法

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');

Answer 1

使用 Laravel 就没有必要了，事实上，你根本不应该使用 $_POST。如果您使用的是框架，请让框架处理和清理您的输入。

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

     // dd($request->input('rent'));
}

此外，该请求甚至在到达您的控制器之前就已经过验证。所以也不需要打$validated = $request->validated()。

顺便说一句，访问“rent”的值时，您的 JS 中存在问题。像这样改变你的JS：

// Instead of 
var rent = $("#rent").val();

// Change it for
var rent = $("#rent").text();

.val() 只能用于输入字段。或者您也可以添加一个输入字段来呈现来自后端的值并保持 JS 不变。像这样：

<td class="data main-bg">
    <input id="rent" name="rent" type="text" value="{{ $apparatusCode->rent }}" />
</td>