Question

我正在尝试创建一个网站，用户可以在其中使用两个下拉菜单选择两个国家/地区，然后查看有关这些国家/地区的数据以进行比较。现在，我可以在用户提交下拉请求后打印所选项目的值，但这不是我想要的。这是使用JavaScript完成的。我已经在文件get.php中编写了一个PHP函数get_code（），该函数捕获给定网站的html源代码，并返回该网站的商品标签中的代码。我的最终目标是使用JavaScript将此新代码嵌入到我的原始代码中，以便它可以在下拉列表中显示所选国家/地区的抓取数据。

我是Web开发的初学者，并且我不太熟悉如何使用HTML，PHP和JavaScript使它们彼此交互，所以如果有人可以帮助的话，那会很棒：）

我尝试将php函数插入到html代码的body标签中，但这给我一个错误，即html代码最终看起来像这样，其中一半被注释掉了：

       <!--?php function get_code($fname) { 
       $s = strpos($fname, "<article"); $e = strrpos($fname, "</article-->
       "); $e += 10; $d = $e - $s; echo substr($fname, $s, $d);}?>

这是我的代码：

compare.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="cstyle.css">
    <title>Compare Countries</title>
</head>
<body>
    <!-- <?php
        function get_code($fname) {
            $s = strpos($fname, "<article");
            $e = strrpos($fname, "</article>");
            $e += 10;
            $d = $e - $s;
            echo substr($fname, $s, $d);
        }
    ?> -->

    <h1>Compare Countries</h1>

    <div class="row">
        <div class="column" id="left">
            <h3>Select a Country</h3>
             <div class="dropdown">
                <form action="get.php" method="get">
                    <select id="dropdownl" name=dropdownl>
                        <option value="Country">Country</option>
                        <option disabled="true">North America</option>
                        <option value="canada">Canada</option>
                        <option value="mexico">Mexico</option>
                        <option value="puerto-rico">Puerto Rico</option>
                        <option value="us-new-format">United States</option>
                    </select> 
                    <input onclick="grabDdValue()" type="submit" name="submit" value="Submit">
                    <!--  -->
                </form>
            </div> 
            <div id="textHolder">
                <!-- This is where the resulted code should be inserted -->
            </div>
        </div>
        <div class="column" id="right">
            <h3>Select a Country</h3>
            <div class="dropdown">
                <select name=dropdown_l>
                    <option value="Country">Country</option>
                    <option disabled="true">North America</option>
                    <option value="canada">Canada</option>
                    <option value="mexico">Mexico</option>
                    <option value="puerto-rico">Puerto Rico</option>
                    <option value="us-new-format">United States</option>
                </select> 
            </div> 
        </div>
    </div>
<script src="./app.js"></script>
</body>

</html>

get.php

<?php

    echo $_GET["dropdownl"];
    // for debugging, this does not work

    $site = file_get_contents('http://blog-internal.xogene.com/' . $_GET["dropdownl"] . '/');

    //echo $site;

    function get_code($fname) {
        $s = strpos($fname, "<article");
        $e = strrpos($fname, "</article>");
        $e += 10;
        $d = $e - $s;
        return substr($fname, $s, $d);
    }

    echo get_code($site)."\n";

?>

要注意的一件事是该php文件中的网站受密码保护，因此如果您尝试对其进行测试，则该网站可能无法正常工作。不过，该功能和文件可以在没有GET变量的情况下，在任何其他网站上正常运行。

app.js 此函数从下拉列表中获取值，并将其返回到textHolder div

function grabDdValue() {
    let textToBeCopied = document.getElementById('dropdownl').value;
    console.log(textToBeCopied);
    document.getElementById("textHolder").innerHTML = textToBeCopied;
};

如果您想看到我的CSS：

h1 {
    text-align: center;
}



.column {
  float: left;
  width: 50%;
  text-align: center;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

#left {
    background-color: red;
}

我的预期结果是将新的html代码嵌入到原始的html代码中

如何在HTML网站中使用PHP和JavaScript函数？

0 个答案: