javascript – 如何在清除搜索字段后重置回AJAX之前的响应状态？

2024年1月29日 204次阅读

我有一个
HTML页面,列出了数据库中的“所有”数据.我已经包含了一个搜索字段,允许用户通过Perl / AJAX进程搜索特定的“行”.它运作得很好.用户输入信息,并且用AJAX请求的结果覆盖保存原始列表的div.只要他们不断更改搜索字段中的信息,AJAX过程就会继续激活,一切运行良好.当他们尝试通过清除搜索字段中的所有内容而不是简单地重新加载页面来尝试返回到原始的“所有”列表时,会出现问题.这让我想知道是否有可能强制div恢复到它的原始状态(在它被AJAX响应覆盖之前)？

我将在下面添加一些代码片段,但我确定它不是特别原创的.

使用Javascript：

            function myTimer() {

            var typingTimer;
            var doneTypingInterval = 2000;

               $("#devicename").keyup(function(){
               clearTimeout(typingTimer);
               if ($('#devicename').val()) {
               typingTimer = setTimeout(updateText, doneTypingInterval);
               }



            });

                    function updateText() {

                    var devname = $('#devicename').val();
                    $.get("http://domainname/cgi-bin/ajax.pl", "devicename="+devname,
                            function(response,status,http) {
                                    $('#resultsbox').html(response);

                            }, "text");
                    }

            }

HTML

<div id="resultsbox">
<table class="devicetable">
 <tr>
    <td class="tablehead">Company Name</td>
    <td class="tablehead">ID</td>
    <td class="tablehead">Status</td>
    <td class="tablehead">Ticket</td>
    <td class="tablehead">Device/Ticket Notes</td>
    <td class="tablehead">Open SR</td>
 </tr>
<tr> lots of stuff </tr>
</div>

Perl的

sub generate_results {
       #DBI stuff, result is formatted and loaded into $result
       print $html->header('text/html;charset=UTF-8');
       print $result;
 }

感谢您提供的信息.我很高兴看到这个主题,只是没有找到任何与此类似的东西.我找到的所有内容似乎都会删除div,重置表单或编写下一组结果.似乎没有什么想回到原始状态.在任何人想知道之前,我不仅仅提供一个标准的搜索结果场景,而是选择从整个列表中削减,这是因为数据库信息显示的状态可能会不时发生变化,并且其中的列表是完整的用作一种操作意识.这就是为什么我想从完整列表到结果回到完整列表.

最佳答案 将div
inner html存放在安全的地方,然后将其恢复.

使用普通的javascript：

// store original html
var originalHtml = div.innerHTML;

// restore it
div.innerHTML = originalHtml;

或者像你使用jquery一样：

// store original html
var originalHtml = $('#resultsbox').html();

// restore it
$('#resultsbox').html(originalHtml);
点赞