Laravel - 在 JavaScript 中检查数据库中是否存在数据

Question

我正在使用 Laravel 7 构建一个表单。首先，用户需要在带有数据列表的输入框中选择一个项目，一旦选择就会显示相应的详细信息（“模糊”输入框）。用户还可以将自定义项目添加到列表中。数据库用于存储所有项目，如果用户添加自定义的项目，它将存储在数据库中以便显示。因此，由于它是一个输入框，因此用户可以输入内容。如果数据库中不存在输入，我希望它不显示任何信息，直到用户单击添加按钮将自定义项目以及输入下拉列表添加到数据库中，然后将显示默认信息。但是如何判断输入是否存在于数据库中呢？表单是这样的，我使用 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

对于简单的方法，我建议您使用 jQuery 的 Ajax，这样您就不必进行太多更改，添加一条 API 路由、检查数据库中的数据和几行 JavaScript 代码。您可以尝试以下方法：

控制器：

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>

这不是实际的可运行代码，只是一个想法，根据此，您可以根据您的进一步愿望进行调整。希望这会有所帮助

Answer 2

您必须使用 AJAX 之类的工具来检查数据库中的用户输入值，然后做出正确的决定，不显示任何内容，直到添加或显示数据库中的内容。

因此工作流程如下：用户输入 => ajax 接受用户输入并提交给控制器函数以检查数据库中的值是否存在 => 根据此控制器函数返回的值 => 向用户显示正确的值