提问人：avent 提问时间：11/11/2023 更新时间：11/11/2023 访问量：60
调用函数后页面刷新 （JavaScript）
page is refreshing after function is called (javascript)
问：
我需要在页面上显示输入值。当我按下提交按钮时，值显示片刻，然后页面立即刷新。我希望页面不要重新显示并显示价值。我也想知道为什么提交按钮后页面刷新。提前致谢！ HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 1</title>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
</head>
<body>
<form>
<label for="name">Name:</label>
<input id="name" type="text">
<input type="submit" value="Send" onclick="myFunc()">
</form>
<p id="show_name"></p>
</body>
</html>
JAVASCRIPT 代码：
function myFunc(){
const obj = {
name : document.getElementById("name").value
}
document.getElementById("show_name").innerHTML = obj.name;
}
我已经尝试过并且它有效，但我想知道是否有其他方法，或者我只是代码中有错误。event.preventDefault()
答：
-1赞
Oriole
11/11/2023
#1
提交按钮，当点击它时，向服务器发送一个http请求，这个协议知道对于这种类型的请求，给出的答案必须刷新网页才能出现
HTTP，即超文本传输协议，是 Web 的基础，它允许 Web 浏览器与 Web 服务器通信以请求和接收网页。
因此，要像您所说的那样停止页面刷新，使用 event.preventDefault（） 是很好的。
0赞
Antony Jude Shaman
11/11/2023
#2
使用 button 元素而不是 input 元素
<button type="button" onclick="myFunc()">Send</button>
或
<input type="button" value="Send"/>
并在 Js 代码中使用 e.preventDefault（）
设置 type=“button” 时，该按钮被视为常规按钮，默认情况下不会触发表单提交
评论
0赞
avent
11/11/2023
谢谢！我把按钮标签放在表单标签外面，页面不刷新。
0赞
Antony Jude Shaman
11/11/2023
希望它有所帮助
1赞
Bassam A.
11/11/2023
#3
如果在不传递任何事件的情况下使用，则意味着您正在使用当前已弃用的 from the window 对象。它仍然受到不同浏览器的支持，但我建议不要依赖mozilla - 更多细节。event.preventDefault()event
因此，建议将 传递给事件处理函数。event
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 1</title>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
</head>
<body>
<form>
<label for="name">Name:</label>
<input id="name" type="text">
<!-- here: myFunc(event) -->
<input type="submit" value="Send" onclick="myFunc(event)">
</form>
<p id="show_name"></p>
</body>
</html>
/// add [event]
function myFunc(event){
event.preventDefault()
const obj = {
name : document.getElementById("name").value
}
document.getElementById("show_name").innerHTML = obj.name;
}
评论