Laravel - 檢查 javascript 內的數據庫中是否存在數據

Question

我正在使用 Laravel 7 構建一個表單。首先，用戶需要在 datalist 輸入框中選擇一項，一旦選擇就會顯示相應的詳細信息（“模糊”輸入框）。 用戶還可以將自定義項目添加到列表中。 數據庫用於存儲所有項目，如果用戶添加自定義項目，它將存儲在數據庫中以便顯示。 因此，由於它是一個輸入框，因此用戶可以輸入。 如果數據庫中不存在輸入，我希望它不顯示任何信息，直到用戶點擊添加按鈕將自定義項目添加到數據庫以及輸入下拉列表中，然后將顯示默認信息。

但是如何判斷輸入是否存在於數據庫中呢？

表格是這樣的，我使用 Jquery 來隱藏/顯示選擇哪個項目的div 。

<form action"/send" method="post">
  <div id="info1">
    <!-- info about first item -->    
  </div>

  <div id="info2">
    <!-- info about second item -->
  </div>

  <div id="info_default">
    <!-- if customised item is chosen, show this one -->  
  </div>

  <div id="info_does_not_exist">
    <!-- if cannot find the input item in database, show this one -->  
  </div>

  <button type="submit">submit</button>
</form>

Answer 1

您必須使用 AJAX 之類的東西來檢查數據庫中的用戶輸入值，然后做出正確的決定，在添加或顯示數據庫中的內容之前不顯示任何內容。

so the workflow will be as follow: user input => ajax take user input and submit to a controller function to check the database for value existence => depending on the returned value from this controller function => display the proper value to the user

Answer 2

For the simple approach, I recommend you use Ajax of jQuery, with this you don't have to change to much, add one more route for API, checking data in database and several JavaScript lines of code. 您可以嘗試以下方法：

Controller ：

use Your\Namespace\Path\Of\Model Model
Class ABC {
    ...
    public function checkExist(){
        $data = request()->get('data'); // get data to check
        $model = new Model();
        $where = ['id' => $data]; // passing your where condition to check
        return $model->where($where)->get()->count() > 0;
    }
}

路由文件（web.php/api.php）：

路線::get('checkExist', 'ABC@checkExist');

看法

<form action"/send" method="post">
  <div id="info1">
    <!-- info about first item -->    
  </div>

  <div id="info2">
    <!-- info about second item -->
  </div>

  <div id="info_default">
    <!-- if customised item is chosen, show this one -->  
  </div>

  <div id="info_does_not_exist">
    <!-- if cannot find the input item in database, show this one -->  
  </div>

  <button type="submit">submit</button>
</form>
...
<script>
  $(function(){
    // every time input change, check value existence in database
    $('.info2 input').change(function(){
      let input_value = $(this).val();
      $.ajax({
        url: "{{ route('checkExist') }}",
        method: "GET",
        data: {"id": input_value},
        success: function(response){
          // process if/else to show div '.info_default' / '.info_does_not_exist'
          if (response) {
            // show '.info_default' and hide '.info_does_not_exist'
          } else {
            // show '.info_does_not_exist' and hide '.info_default'
          }
        }
      });
    })
  })
</script>

這不是實際的可運行代碼，只是一個想法，根據這個，您可以根據您的進一步需求對其進行調整。 希望這會有所幫助