JS：提交表单并在同一页面上呈现结果
Posted
技术标签:
【中文标题】JS：提交表单并在同一页面上呈现结果【英文标题】：JS: Submit form and render results on same page 【发布时间】：2021-05-28 18:37:36 【问题描述】：提前为我的天真道歉，我绝对不是网络开发人员。
我正在尝试获取一个简单 html 表单的内容，将其作为 GET 请求提交到我正在运行的非常轻量级的服务器，然后在同一页面上呈现结果。到目前为止，这是我的代码：
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
var submit_button = $('#submit_form');
submit_button.click(function()
var word = $('word').val();
var data = '?word=' + word;
var update_div = $('#update_div');
$.ajax(
type: 'GET',
url: 'http://35.45.55.65:5000/api',
data: data,
success:function(html)
update_div.html(html);
console.log("Done");
console.log(html)
);
);
</script>
<h1>Enter a word to check</h1>
<form id="my_form">
Word: <br/> <input name="word" id="word" type="text" /><br />
<input id="submit_form" type="submit" value="Submit">
</form>
<div id="update_div"></div>
从我读过的所有内容来看，这段代码应该可以工作吗？但是，表单根本没有提交，而是 GET 请求被附加到当前 URL，甚至没有运行 JS 代码——就像这样：currentURL.com/test.html?word=hello+world
我真的不确定这里发生了什么，任何帮助将不胜感激！谢谢:)
【问题讨论】：
使用这个var word = $('#word').val();
【参考方案1】：
您需要阻止表单的默认行为。这就是您将这些值附加到 URL 的原因。
submit_button.click(function (event)
event.preventDefault();
// rest of code
【讨论】：
以上是关于JS：提交表单并在同一页面上呈现结果的主要内容，如果未能解决你的问题，请参考以下文章
我希望我的 php 表单提交数据并在同一页面但不同的选项卡上重定向
将表单数据提交到另一个 php 页面，但将结果显示回提交表单的同一页面？