在我的前端，我使用以下代码从本地node.js服务器获取url：
fetch('http://localhost:3000/search/house')
.then(....当我检查它发送到服务器的内容时(在Firefox浏览器的开发工具中的网络选项卡中)，我看到
GET http://localhost:3000/?input=house有人知道为什么修改url吗？(对不起，我是初学者！)
非常感谢！Joe F.
编辑：这是一个最小的例子。首先是前端：
function search() {
fetch('http://localhost:3000/search/house')
.then(response => response.json())
.then(function(data) {
console.log('data: ' + data);
});
}body {
margin: 0;
background-color: rgb(238, 238, 238);
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
}
h1 {font-size: 35px;}
h2 {font-size: 24px; font-weight: normal; text-decoration: underline;}
/* Loginseite betreffend */
.login-form {
width: 300px;
/* margin: 0 auto; */
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.login-form h1 {
color: #4d4d4d;
padding: 20px 0 20px 0;
}
.login-form input[type="password"],
.login-form input[type="text"] {
width: 100%;
padding: 15px;
border: 2px solid #dddddd;
margin-bottom: 15px;
box-sizing:border-box;
}
.login-form input[type="submit"] {
width: 100%;
padding: 15px;
background-color: #535b63;
border: 0;
box-sizing: border-box;
cursor: pointer;
font-weight: bold;
color: #ffffff;
}
/* Topnav (Menü) betreffend */
.topnav {
overflow: hidden;
background-color: rgb(35, 135, 212);
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 18px 18px;
text-decoration: none;
min-width: 80px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav a.logout {
background-color: orange;
color: white;
}
/* Home Seite betreffend */
.content {
width: 1000px;
max-width: 90%;
margin: 0 auto;
}
.grid-area {
margin-bottom: 20px;
padding: 40px 0;
background-color: rgb(35, 135, 212);
border: black, 20px;
border-width: 4px;
border-style: solid;
border-radius: 15px;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 25% 25% 25% 25%;
grid-template-areas:
"l1 ro"
"l2 ro"
"l3 ro"
"l4 ru"
}
#boxHomeButton {grid-area: l1;}
#boxInputButton {grid-area: l2;}
#boxStatisticButton {grid-area: l3;}
#boxSettingsButton {grid-area: l4;}
#boxQuerySelection {
grid-area: ro;
width: 80%;
min-height: 320px;
margin: 30px auto;
background-color: rgb(238, 238, 238);
/* border: black 1px solid; */
border-radius: 10px;
}
#boxQueryButton {grid-area: ru;}
.grid-areaSearch {
margin-bottom: 20px;
padding: 40px 0;
background-color: rgb(35, 135, 212);
border: black, 20px;
border-width: 4px;
border-style: solid;
border-radius: 15px;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
grid-template-areas:
"row1"
"row2"
}
#inputText {
grid-area: row1;
}
#searchResultTable {
grid-area: row2;
}
.button {
font-size: 20px;
width: 80%;
margin: 30px auto;
padding: 20px;
color: rgb(31, 31, 31);
border: black 3px solid;
border-radius: 10px;
overflow: scroll;
}
.textInput {
font-size: 20px;
width: 80%;
margin: 30px auto;
padding: 20px;
color: rgb(31, 31, 31);
border: black 3px solid;
border-radius: 10px;
overflow: scroll;
}
.checkbox {
width: 20px;
height: 20px;
}
.checkbox_left {
width: 20px;
height: 20px;
text-align: left;
margin: 5px 5px 5px 50px;
}
.inner {
width: 200px;
height: 100px;
background: green;
}
@media screen and (max-width: 1099px) {
.grid-area {
grid-template-columns: 50% 50%;
grid-template-rows: 16.7% 16.7% 49,9% 16.7%;
grid-template-areas:
"l1 r1"
"l2 r2"
"m1 m1"
"m2 m2"
}
#boxHomeButton {grid-area: l1;}
#boxInputButton {grid-area: r1;}
#boxStatisticButton {grid-area: l2;}
#boxSettingsButton {grid-area: r2;}
#boxQuerySelection {grid-area: m1;}
#boxQueryButton {grid-area: m2;}
.button {
margin: 10px auto;
border-radius: 7px;
}
}<!DOCTYPE html>
<html>
<head>
<title>Vokabeltrainer</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="layout.css">
<script src="vTrainer_.js"></script>
</head>
<body>
<h1 id="elementSearch(0)">Loading...</h1>
<div class="content" id="divSearchContent">
<section class="grid-areaSearch">
<div class="box" id="boxSearchText">
<form>
<label for="textInput">Enter a word and click enter:</label>
<input type="input" class="textInput" name="input" id="textInput" onclick="search()">
</form>
</div>
<div class="box" id="searchResultTable"></div>
</section>
</div>
</body>
</html>这是后端(我想你不需要)：
const express = require('express');
const app = express();
const mysql = require('mysql');
const util = require('util');
const session = require('express-session');
const path = require('path');
// parse HTTP POST Data
app.use(express.urlencoded({extended: true}));
app.use(express.json()) // To parse the incoming requests with JSON payloads
// put client-side code (html/css/js) in the frontend folder
app.use(express.static(__dirname + '/../frontend/'));
connection = mysql.createConnection({
host : 'localhost',
user : 'joe',
password : 'xxx',
database : 'vocabulary_trainer'
});
connection.connect((err) => {
if(err) {
console.log('Error connecting to DB: change connection settings!');
} else {
console.log('Connection established!');
}
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server listening at http://localhost:${PORT}`);
});
app.use(session({
secret: 'secret',
resave: true,
saveUninitialized: true
}));
const dbQuery = util.promisify(connection.query).bind(connection); // gehört zum Modul util
app.get('/', function(request, response) {
console.log("got a request")
response.sendFile(path.join(__dirname + '/../frontend/vTrainer_.html'));
});
app.get("/search/:keyWord", async function(request, response) { // Suchergebnisse aus Datenbank holen
if (request.session.loggedin) {
let searchResult = await dbQuery("SELECT * FROM words where proposedWord = ? or associatedWord1 = ? or associatedWord2 = ?;", [request.params.keyWord, request.params.keyWord, request.params.keyWord]);
response.json(searchResult);
} else {
response.json({success: 'No.'});
}
});获取代码没有任何问题。问题是搜索函数，从未调用过。按Enter键将触发表单提交。您需要在keydown上添加一个事件侦听器并调用event.preventDefault()，这样就不应该提交表单。
function search(event) {
if (event.keyCode !== 13) return; //not enter pressed
event.preventDefault();
fetch('http://localhost:3000/search/house')
.then(response => response.json())
.then(function(data) {
console.log('data: ' + data);
});
}body {
margin: 0;
background-color: rgb(238, 238, 238);
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
}
h1 {font-size: 35px;}
h2 {font-size: 24px; font-weight: normal; text-decoration: underline;}
/* Loginseite betreffend */
.login-form {
width: 300px;
/* margin: 0 auto; */
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.login-form h1 {
color: #4d4d4d;
padding: 20px 0 20px 0;
}
.login-form input[type="password"],
.login-form input[type="text"] {
width: 100%;
padding: 15px;
border: 2px solid #dddddd;
margin-bottom: 15px;
box-sizing:border-box;
}
.login-form input[type="submit"] {
width: 100%;
padding: 15px;
background-color: #535b63;
border: 0;
box-sizing: border-box;
cursor: pointer;
font-weight: bold;
color: #ffffff;
}
/* Topnav (Menü) betreffend */
.topnav {
overflow: hidden;
background-color: rgb(35, 135, 212);
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 18px 18px;
text-decoration: none;
min-width: 80px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav a.logout {
background-color: orange;
color: white;
}
/* Home Seite betreffend */
.content {
width: 1000px;
max-width: 90%;
margin: 0 auto;
}
.grid-area {
margin-bottom: 20px;
padding: 40px 0;
background-color: rgb(35, 135, 212);
border: black, 20px;
border-width: 4px;
border-style: solid;
border-radius: 15px;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 25% 25% 25% 25%;
grid-template-areas:
"l1 ro"
"l2 ro"
"l3 ro"
"l4 ru"
}
#boxHomeButton {grid-area: l1;}
#boxInputButton {grid-area: l2;}
#boxStatisticButton {grid-area: l3;}
#boxSettingsButton {grid-area: l4;}
#boxQuerySelection {
grid-area: ro;
width: 80%;
min-height: 320px;
margin: 30px auto;
background-color: rgb(238, 238, 238);
/* border: black 1px solid; */
border-radius: 10px;
}
#boxQueryButton {grid-area: ru;}
.grid-areaSearch {
margin-bottom: 20px;
padding: 40px 0;
background-color: rgb(35, 135, 212);
border: black, 20px;
border-width: 4px;
border-style: solid;
border-radius: 15px;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
grid-template-areas:
"row1"
"row2"
}
#inputText {
grid-area: row1;
}
#searchResultTable {
grid-area: row2;
}
.button {
font-size: 20px;
width: 80%;
margin: 30px auto;
padding: 20px;
color: rgb(31, 31, 31);
border: black 3px solid;
border-radius: 10px;
overflow: scroll;
}
.textInput {
font-size: 20px;
width: 80%;
margin: 30px auto;
padding: 20px;
color: rgb(31, 31, 31);
border: black 3px solid;
border-radius: 10px;
overflow: scroll;
}
.checkbox {
width: 20px;
height: 20px;
}
.checkbox_left {
width: 20px;
height: 20px;
text-align: left;
margin: 5px 5px 5px 50px;
}
.inner {
width: 200px;
height: 100px;
background: green;
}
@media screen and (max-width: 1099px) {
.grid-area {
grid-template-columns: 50% 50%;
grid-template-rows: 16.7% 16.7% 49,9% 16.7%;
grid-template-areas:
"l1 r1"
"l2 r2"
"m1 m1"
"m2 m2"
}
#boxHomeButton {grid-area: l1;}
#boxInputButton {grid-area: r1;}
#boxStatisticButton {grid-area: l2;}
#boxSettingsButton {grid-area: r2;}
#boxQuerySelection {grid-area: m1;}
#boxQueryButton {grid-area: m2;}
.button {
margin: 10px auto;
border-radius: 7px;
}
}<!DOCTYPE html>
<html>
<head>
<title>Vokabeltrainer</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="layout.css">
<script src="vTrainer_.js"></script>
</head>
<body>
<h1 id="elementSearch(0)">Loading...</h1>
<div class="content" id="divSearchContent">
<section class="grid-areaSearch">
<div class="box" id="boxSearchText">
<form>
<label for="textInput">Enter a word and click enter:</label>
<input type="input" class="textInput" name="input" id="textInput" onkeydown="search(event)">
</form>
</div>
<div class="box" id="searchResultTable"></div>
</section>
</div>
</body>
</html>