在显示表的ajax加载栏时减少代码

Question

我使用下面的代码从mysqli数据库中调用结果并将其显示在具有实时搜索功能的页面上..在加载结果时，它显示<div id='ajax_request'></div>基本上加载gif并在完成时隐藏该div并显示div <div id='ajax_results_table'></div>以显示结果

我很想知道是否有一个更好的方法来做同样的事情，因为我可以在一个页面上有多个请求，我需要每个div显示加载，同时它正在执行自己的ajax请求

到目前为止，我将复制相同的代码并更改div的ID

我是ajax的新手，想了解更多，到目前为止，这就是我所拥有的。

Html代码......

<input type='text' class='form-control' onkeyup='showResult(this.value)'  placeholder='Search Results'>
<div id='ajax_request'><img src='/ajax-loader.gif' class='text-center'> Fetching Data ...</div>
<div id='ajax_error'>Something went wrong with our ajax request</div>
<table id='ajax_results_table'>
   <thead>
      <tr>
         <th> SMS ID</th>
         <th> Time Stamp</th>
         <th> Mobile Number</th>
         <th> Message</th>
         <th> Message Status</th>
      </tr>
   </thead>
   <tbody  id='ajax_results'>
   </tbody>
</table>

Ajax代码：

<script>
    function showResult(str) {
        $.ajax({
            url: '/getjson.php?search=' + str,
            type: 'POST',
            dataType: 'json',
            Timeout: 3000,
            beforeSend: function() {
                $('#ajax_request').show();
                $('#ajax_results_table').hide();
                $('#ajax_error').hide();
            },
            success: function(response) {
                var trHTML = '';
                $.each(response, function(key, value) {
                    trHTML +=
                        '<tr><td>' + value.ID +
                        '</td><td>' + value.Timestamp +
                        '</td><td>' + value.Number +
                        '</td><td>' + value.Message +
                        '</td><td>' + value.Status +
                        '</td></tr>';
                });
                $('#ajax_results').html(trHTML);
                $('#ajax_request').hide();
                $('#ajax_results_table').show();

            },
            error: function() {
                $('#ajax_request').hide();
                $('#ajax_error').show();

            }
        });

    }

    showResult('');
</script>