新建项目myweb,在项目中建一个img文件夹,放入图片。新建search.html,内有一文本框和一个按钮,当在文本框中输入值并点击按钮,可在上面数据库表中进行搜索,完成后的结果显示在result页。具体显示可参考下图。
时间: 2023-05-21 07:05:33 浏览: 81
基于Python和HTML的myweb2毕设设计源码
你可以在search.html中添加如下代码来实现该功能:
```
<!DOCTYPE html>
<html>
<head>
<title>Search Page</title>
<script>
function search() {
var input = document.getElementById("searchInput").value;
window.location.href = "/result.html?q=" + input;
}
</script>
</head>
<body>
<input type="text" id="searchInput" placeholder="Enter your search query">
<button onclick="search()">Search</button>
</body>
</html>
```
上面的代码中,我们创建一个文本框和一个按钮,并在按钮的点击事件中获取输入的搜索值,并将其作为查询参数添加到结果页的URL中。然后通过JavaScript中的 window.location.href 实现把浏览器页面的URL地址修改过去。
在result.html的页面中,我们可以通过以下代码来获取查询参数并进行搜索:
```
<!DOCTYPE html>
<html>
<head>
<title>Search Results</title>
</head>
<body>
<h1>Search Results</h1>
<hr>
<script>
var query = getUrlVars()["q"];
var results = searchDatabase(query);
document.write(results);
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function searchDatabase(query) {
// Perform database search here
return "Search results for query: " + query;
}
</script>
</body>
</html>
```
上面代码中,我们首先通过 getUrlVars() 函数获取查询参数值,接着在 searchDatabase() 函数中执行实际的搜索操作,最后将搜索结果显示在页面上。
需要注意的是,这里的代码只是示例,实际应用中需要使用服务器端编程语言(如PHP或Node.js)与数据库进行交互,并将查询结果返回到页面中显示。
阅读全文