Question

我有这个编码，允许我显示从下拉列表中选择的任何文件的.txt文件内容。

<form name="add" method="post" id="add" action="show.php">
   Choose a file:
      <select name="files" id="files" onchange="this.form.submit()">
          <option value="File1">File1</option>
          <option value="File2">File2</option>
      </select>
</form>

使用相应的show.php（是的目的是仅显示文件的最后三行）：

<?php
    $ChosenFile = $_POST['files'];
    $file = $ChosenFile.'.txt';
    $contents = escapeshellarg($file);
    $line = `tail -n 3 $contents`;

    echo nl2br($line);
    echo "<br><br>";
?>

尝试让它在选择下拉列表下方显示结果，而不是使用此代码直接显示到php本身：

<script>
    $('#files').on('change', function(){
        $.get('show.php', function(data);
            $('#result').html(data);
          });
        });
</script>

<div id="result"></div>

php工作并显示文本内容但我无法在下拉列表下方显示它。我错过了什么？

Answer 1

删除onchanged属性表单select标记

Choose a file:
<select name="files" id="files">
  <option value="File1">File1</option>
  <option value="File2">File2</option>
</select>

您必须将表单数据发送到show.php文件才能获得正确的结果

 <script>
  $(function(){
     $('#files').on('change', function(){
         $.ajax({
             url: 'show.php',
             type: 'post',
             data: $('form#add').serialize()
         }).done(function(data) {
             $('#result').html(data);
         });
    });
  });
 </script>

Answer 2

由于您的原始html和php使用POST，您还需要在ajax脚本中使用POST。

并且您没有向脚本发送任何数据。

所以结果应该是这样的：

    $('#files').on('change', function(){
      $.post('show.php', $(this).closest('form').serialize(), function(data);
        $('#result').html(data);
      });
    });

如评论中所述，您还只需要一个事件处理程序。

在当前页面上显示php结果

2 个答案: