gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 17:51:06 25 4
gpt4 key购买 nike

我对 javascript 和网络开发完全陌生,有一个问题。我有两个 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;

关于javascript - 通过javascript打开新的HTML页面并传递参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43695040/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com