HTML数据列表中的动态数组

时间:2018-12-11 09:00:51

标签: javascript php arrays html5 html-datalist

我想动态刷新此数据列表中的php代码,而无需重新加载整个页面。

<form id="form1" action="1.5-unterseite-nach-Eingabe.php" method="post" enctype="multipart/form-data">
    <tr>
        <td>Lecture auswählen: </td>
        <td><input list="files" name="unterlage"></td>
    </tr>
    <datalist id="files">
    <?php

        $files = array_diff( scandir("/srv/www/htdocs/share/"), array(".", "..") );
            foreach ($files as $option) {
                echo '<option value=\''.$option.'\'>';
            }
        ?>
    </datalist>

希望您能帮助我。

2 个答案:

答案 0 :(得分:1)

不确定自己的最终目标是什么。

但是,一种方法是设置一个AJAX GET方法,该方法在其自己的文件中调用该PHP代码段。抓取所有返回的数据,然后使用JS将其插入页面。

开始学习JS,因为这是您无需重新加载页面即可提取动态内容的唯一方法。

要使用AJAX获取数据,请使用类似的内容:

<script>
    $(document).ready(function(){
        $.ajax({                                      
            url: 'URL_TO_PHP_FILE/scanFiles.php',        
            dataType: 'text',   
            success: function(data)
            {
                $("#files").html(data);
            }
        });
    });
</script>

现在将您的PHP代码段简单地移动到它自己的文件中即可:

$files = array_diff( scandir("/srv/www/htdocs/share/"), array(".", "..") );
    foreach ($files as $option) {
        echo '<option value=\''.$option.'\'>';
    }
?>

提供的唯一回声是您希望在AJAX通话中收到的回声,您应该很好。

还要确保已将jQuery库链接到页面,以便可以使用AJAX。多看看jQuery。它将使您的生活更加轻松。

您还将希望有一种方法,每隔几秒钟执行一次JS代码,或者根据以前的用户互动执行一次触发。

答案 1 :(得分:1)

您可以将HTML表单写在“ index.html”文件中。并使用javascript间隔在data.php中请求由PHP提供的数据。伪代码将如下所示:

// index.html

<html>
<form id="form1" action="1.5-unterseite-nach-Eingabe.php" method="post" enctype="multipart/form-data">
<tr><td>Lecture auswählen: </td><td><input list="files" name="unterlage"></td></tr>
<datalist id="files">
</datalist>
</form>
<script>
window.setInterval(function(){
    function request_data(){
           $.ajax({
           url: 'data.php',
           method: "post",
           success: function (data) {
              // Do something here
              $("#files").html(data);
           }
        })
    }
},2000); // 2 secends request a time
</scirpt
</html>

// data.php

<?php
    $files = array_diff( scandir("/srv/www/htdocs/share/"), array(".", "..") );
    return json_encode($files);
?>