通过javascript打开新的HTML页面并传递参数_Javascript_Html

通过javascript打开新的HTML页面并传递参数

javascript html

通过javascript打开新的HTML页面并传递参数,javascript,html,Javascript,Html,我对javascript和web开发完全陌生，有一个问题。我有两个HTML文件，一个包含搜索字段和搜索按钮，另一个稍后应该包含搜索结果。如果用户单击搜索按钮，我想打开另一个HTML文件并传递搜索词如果使用当前代码执行此操作，它只传递[object%20HTMLInputElement]，而不是搜索词。我现在被困了几个小时，甚至类似的stackoverflow帖子也帮不了我。这是我的搜索字段HTML的代码： <!DOCTYPE html> <html> <head

我对javascript和web开发完全陌生，有一个问题。我有两个HTML文件，一个包含搜索字段和搜索按钮，另一个稍后应该包含搜索结果。如果用户单击搜索按钮，我想打开另一个HTML文件并传递搜索词

如果使用当前代码执行此操作，它只传递[object%20HTMLInputElement]，而不是搜索词。我现在被困了几个小时，甚至类似的stackoverflow帖子也帮不了我。这是我的搜索字段HTML的代码：

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden -->
    <title>Next Event</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<script type="text/javascript" src="http://api.eventful.com/js/api"></script>

<!-- jQuery (notwendig für Bootstraps JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Alle kompilierten plugins einbeziehen -->
<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">

    function search() {
        var where   = document.getElementById("where");
        window.location = "SearchResults.html?city=" + where;
    }

</script>

<body>
    <div class="container-fluid">
        <h1>Next Event</h1>

        <div class="form-group">
            <label for="usr">Ort</label>
            <input type="text" class="form-control" id="where" placeholder="Bitte geben Sie eine Stadt ein.">
        </div>

        <button onclick="search()" type="button" class="btn btn-primary">Search</button> <p><br></p>

        <p id="output"/>
        <p><br/><br/><br/></p>
        <p id="output2"/>
    </div>
</body>

</html>

这是搜索结果HTML：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden -->
    <title>Next Event</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<script type="text/javascript" src="http://api.eventful.com/js/api"></script>

<!-- jQuery (notwendig für Bootstraps JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Alle kompilierten plugins einbeziehen -->
<script src="js/bootstrap.min.js"></script>

<body>
    <div class="form-group">
        <h1 id="header"></h1>
        <script type="text/javascript">
            document.getElementById('header').innerHTML = "Events in " + window.location.search;
        </script>
    </div>
</body>

</html

我非常感谢您的帮助。

您将整个对象发送到页面，而您应该只发送其值。使用以下代码获取输入值：

var value = document.getElementById("input").value;

然后，通过URL重定向到其他页面发送数据非常简单。您只需重新定向并添加如下参数：

window.location.href = "searchresult.html?city="+value;

var-where=document.getElementByIdwhere.value或var-where=$where.val；//谢谢，这解决了问题！我的方法被认为是糟糕的风格吗？我读了很多关于get和post方法的书-这些方法会更好吗？@10jo10你需要了解跨端脚本。使用此模式，向您发送恶意脚本并不困难。也谢谢您。这就解决了问题。你认为这种方法不好吗？我读了很多关于get和post方法的文章-这是更好的方法吗？@10jo10查看此页面：。XSS攻击可能是毁灭性的。