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

Posted 2023-05-09

【中文标题】使用 jQuery 替换表单提交上的文本会停留几秒钟，然后消失

【英文标题】：Replacing text on form submit using jQuery stays for few seconds and disappears later

【发布时间】：2021-10-04 02:19:47

【问题描述】：

我有一个表单元素和跨度元素如下：

//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 为“名称”的跨度中。但是在提交表单时，文本会闪烁几秒钟。

我希望文本出现在页面上，并且我还希望 ?username=name 在表单提交后出现在 url 中，即，我希望表单输入成为 url 的一部分，因为我想尝试 DOM XSS 攻击在我的页面上。我使用烧瓶服务器渲染 html 文件。

谁能告诉我如何在不影响包含表单输入数据的 url 的情况下在页面上制作文本？

【参考方案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 来完成。

【讨论】：

使用 preventDefault 有助于文本部分，但我的 url 参数现在不包含表单输入。知道如何解决这个问题吗？

那是因为您不再向服务器发送信息。如果您确实想将信息发送到服务器，那么您需要在页面中放置“抱歉，用户名已被使用...”消息，因为它是从 服务器端呈现的，而不是在 javascript 中/jQuery.我还建议您研究一下客户端和服务器端逻辑之间的区别。