Question

我是非常 PHP的新手，所以请忍受我的无知。我有以下脚本在excel表中搜索单元格数据（这是一个非常基本的公司电话簿）：

    <html>
<?php echo "Search:" ?>
<form id="form1" method="post" action ="<?php echo $_SERVER['PHP_SELF']; ?>"> <label>
<input id="search" name="search" type="text" />
</label>
<label>
<input type="submit" />
</label>
<img src="loading.gif" width="16" height="11" />
</form>
<input type="reset" value="Reset">
<?php
$search= $_REQUEST['search'];
if ($search > ''){ $search = $search;} else { $search = '';}
?>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
var visualization;

function drawVisualization() {

var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/pub?key=0Ap2dozrbYI5vdEV5ZmtzU3hCdktzWDU0NTdOQjRSNkE&single=true&gid=0&output=html');

query.setQuery('SELECT A, B, C, D where upper(A) like upper("%<?php echo $search; ?>%") or upper(B) like upper("%<?php echo $search; ?>%") order by A asc label A "Company", B "Contact Name", C "Contact Number", D "Company General Contact"');

query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}

var data = response.getDataTable();

visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {legend: 'bottom'});

    }

    google.setOnLoadCallback(drawVisualization);
    </script>

    <div id="table"></div>

    </div>
    </html>

如果未输入任何文本且用户单击“提交”，则视图将重置以显示完整的Excel工作表。我想添加一个功能相同的重置按钮（用户更有意义的是拥有一个实际的“重置”按钮。

编辑：只是注意我不试图简单地清除搜索输入。基本上，我想复制执行空白搜索时提交按钮的作用（显示所有数据）。

Answer 1

将此行添加到您的html表单：

<input type="reset" value="Reset">

Answer 2

这里有许多问题需要解决。我已经清理了你发布的一些代码，但我不想完全重写你所做的一切。看起来您可能已经将在网络上找到的几个示例复制并粘贴到一个项目中。如果您在将脚本投入生产之前查看脚本的功能，这确实很有帮助。这样做可以帮助您解决其中的一些问题。例如，在一行中检查变量以查看它是否大于空字符串。然后，如果它是，则将其分配给自身，如果它为空，则将其分配给空字符串。基本上，那条线什么都不做。仔细阅读您的代码，以便了解它的作用。

最后，我发现你并不真正需要PHP。您只是使用它回发到服务器并重新加载页面。由于您使用JavaScript实际加载信息，我决定用JavaScript完成所有工作。它使页面更简单，并防止不必要的回发。我还格式化了你的代码并清理了一些。但是，这仍需要进一步完善和清理。我刚刚把它带到了一个工作状态：

<html>
    <body>
        <input id="search" name="search" type="text" />
        <button id="submitQuery">Submit Query</button>
        <button id="resetQuery">Reset Query</button>
        <div id="table"></div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('visualization', '1', { packages: ['table'] });

            var visualization;
            var searchTerm = '';

            function drawVisualization() {
                var query = new google.visualization.Query(
                'https://docs.google.com/spreadsheet/pub?key=0Ap2dozrbYI5vdEV5ZmtzU3hCdktzWDU0NTdOQjRSNkE&single=true&gid=0&output=html');
                query.setQuery('SELECT A, B, C, D where upper(A) like upper("%' + searchTerm + '%") or upper(B) like upper("%' + searchTerm + '%") order by A asc label A "Company", B "Contact Name", C "Contact Number", D "Company General Contact"');
                query.send(handleQueryResponse);
            }

            function handleQueryResponse(response) {
                if (response.isError()) {
                    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                    return;
                }

                var data = response.getDataTable();

                visualization = new google.visualization.Table(document.getElementById('table'));
                visualization.draw(data, { legend: 'bottom' });
            }

            google.setOnLoadCallback(drawVisualization);

            $(function () {
                $('#submitQuery').click(function (e) {
                    searchTerm = $('#search').val();
                    drawVisualization();
                    return false;
                });
                $('#resetQuery').click(function (e) {
                    $('#search').val('');
                    searchTerm = '';
                    drawVisualization();
                    return false;
                });
            });
        </script>
    </body>
</html>

我没有使用表单中的按钮进行回发，而是让按钮适当地填充变量并调用函数来绘制可视化。我确实绘制了jQuery以使事情变得更容易（请注意对CDN的调用）。这使代码更清晰，更易于使用。你不必这样做，但如果你把它拿出来，你将需要重新编写我的代码。

如果您有任何疑问，请与我们联系。就目前而言，这段代码应该完全按照您的意愿行事。

基本的PHP搜索...需要重置脚本

2 个答案: