使用jQuery替换表单提交上的文本停留几秒钟，然后消失

Question

我有一个form元素和一个span元素，如下所示:

//I have used following jQuery function to replace text in span:
$(document).ready(function () {
$("#btn").click(function () {
var new_text = "Sorry, username '" + $("#username").val() + "' is taken already. Try another one. ";
$("#name").text(new_text);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="#form">
<input id="username" name="username" type="text">
<input class="btn btn-primary" value="submit" type="submit" id="btn">
</form>

<span id="name"></span>

在表单提交时，我想将文本添加到具有id "name"的span中。但是在表单提交时，文本会闪烁几秒钟。

我希望文本出现在页面上，我也想?username=name出现在表单提交后的url中，即，我希望表单输入是url的一部分，因为我想尝试DOM XSS攻击我的页面。我使用flask服务器呈现html文件。

谁能告诉我如何使页面上的文本不影响url包含表单输入数据?

Answer 1

文本闪烁几秒钟，因为单击.btn按钮提交表单，这会刷新页面并删除自页面首次加载以来对DOM所做的动态更改。

为了保持对元素文本的更新，您只需要在#form元素的submit事件上调用preventDefault()来停止提交，并防止页面重新加载。

jQuery($ => {
$("#form").on('submit', e => {
e.preventDefault();
var new_text = `Sorry, username '${$("#username").val()}' is taken already. Try another one`;
$('#name').text(new_text);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="form">
<input id="username" name="username" type="text">
<input class="btn btn-primary" value="submit" type="submit" id="btn">
</form>
<span id="name"></span>

请注意，从代码和显示的消息的上下文中，我假设您需要通过向服务器发出AJAX请求来扩展逻辑，以检查输入的用户名的有效性和可用性。我将把它留给OP来完成。