Question

我是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

我会非常感谢任何帮助。

Answer 1

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

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

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

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

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

1 个答案: