Question

我避免将数据库用于我的最新项目，因此我使用的是文件和文件夹。我将目录的文件夹列为按钮，每个文件夹都会加载一个屏幕，其中包含一个文件列表。我现在试图动态加载文件的内容而不刷新，以避免丢失菜单（屏幕上显示的文件列表为按钮）。我试图使用ajax但因为文件按钮是使用foreach php循环创建的，当我单击其中一个文件按钮时传递给javascript / ajax的值是不正确的，因为它总是想要传递第一个按钮＆＃ 39;列表中的值！

这是PHP代码：

<?php                                                                                               
        if(isset($_POST['FolderContent'])) {

            foreach (glob($_POST['FolderContent']."/*.*") as $file) {

                if(is_file($file)){                                                             
                    $fileNoExt = substr($file, 0, -4);  //Remove file extension so the menu item shows only the name of the file
                    $character = explode('/', $fileNoExt);
                    $filePathTrimmed = trim(end($character));
                    echo    "<form method='POST'>
                            <input type='submit' ID='selectBtn' value='$filePathTrimmed' onclick='return displayData();'/>
                            <input type='hidden' id='dataField' name='content' value='$file'/>
                            <input type='hidden' name='title' value='$filePathTrimmed'/>
                        </form>";

                } else {
                    echo "Files not found!";
                }
            }
        }

    ?>

这是JS：

<script>
function displayData()
     {

        var btnData = document.getElementByID('selectBtn').value;

        alert("The currently selected button is "+btnData);
        });

    }   
</script>

正如您可以看到PHP循环并为每个按钮和隐藏字段创建表单。 JS只是试图抓住点击按钮的值并提醒它。问题是该值始终是列表中的第一个文件。

我做错了什么？如果我在按钮而不是ID上使用类，那么我将需要在数组中说明数字：

var btnData = document.getElementsByClassName('selectBtn')[0].value;

但这意味着我需要知道数组中的位置并使用该值非常无意义。

我很卡住 - 或者很厚！

感谢。

Answer 1

您需要在this内使用onclick='return displayData();，然后在您的函数中使用它，如下所示： -

工作片段： -

＆＃13;

function displayData(ele){

  var btnData = ele.value;

   alert("The currently selected button is "+btnData);
   return false;

}

＆＃13;

<form method='POST'>
    <input type='submit' value='hi' onclick='return displayData(this);'/>
    <input type='hidden' name='content' value='$file'/>
    <input type='hidden' name='title' value='$filePathTrimmed'/>
</form>

＆＃13;

Answer 2

您为每个单独的表单设置相同的id值。您应该确保所有id属性值对于所有html元素都是唯一的，作为经验法则，以避免在dom中出现不可预测的行为。

UITableViewCell

和javascript：

<?php                                                                                               
    if(isset($_POST['FolderContent'])) {

        foreach (glob($_POST['FolderContent']."/*.*") as $idx => $file) {

            if(is_file($file)){                                                             
                $fileNoExt = substr($file, 0, -4);  //Remove file extension so the menu item shows only the name of the file
                $character = explode('/', $fileNoExt);
                $filePathTrimmed = trim(end($character));
                echo    "<form method='POST'>
                        <input type='submit' id='selectBtn-{$idx}' value='$filePathTrimmed' onclick='return displayData(this.id);'/>
                        <input type='hidden' id='dataField' name='content' value='$file'/>
                        <input type='hidden' name='title' value='$filePathTrimmed'/>
                    </form>";

            } else {
                echo "Files not found!";
            }
        }
    }

?>

Answer 3

解决方案：我使用过＆＃39; return false＆＃39;在javascript / ajax代码块的末尾，＆＃39;这个＆＃39;在PHP代码中传递保存在＆＃39;值＆＃39;中的当前数据 - 谢谢你活着。

我也使用了这个名字＆＃39;用于存储和访问其他数据数据的属性。

PHP：

echo    "<form method='POST'>
                            <input type='submit' id='selectBtn' name='$file' value='$filePathTrimmed' onclick='return displayData(this);'/>
                        </form>";

JS：

<script>
function displayData(fileName)
     {

        var btnData =fileName.name;
        var name = fileName.value;

        $.ajax({
            type : "POST",
            url : "DisplayFileContents.php",
            data : {"data": btnData, "name": name},
            success : function(result) {

                $('.page-content').html(result);
                $('body').animate({scrollTop: 0}, 200);
            }
        });
        return false;

    };

DisplayFileContents.php：

<?php 

$filename=$_POST['data'];   
$title = $_POST['name'];

echo "<h2>".$title."</h2>"; 
echo "<pre>";
Include $filename;
echo "</pre>";

?>

PHP循环值发送到javascript

3 个答案: