提交表单后如何使确认消息保持不变？答案

【问题标题】：How do you make a confirmation message stay put after submitting a form?提交表单后如何使确认消息保持不变？
【发布时间】：2013-07-03 17:03:47
【问题描述】：

我正在尝试制作一个简单的时事通讯注册表单，其中包含电子邮件地址字段和提交按钮。当用户输入他们的地址并点击提交时，我希望在表单下方显示一条确认消息。实际发生的是消息出现并立即消失。我如何让它保持原样？这是我的代码：

<body>
    <form id="newsletter_signup"> <!-- form action to be added later -->
        <p><input type="text" name="email" id="email" placeholder="your@email.com" />
        <input type="submit" value="Subscribe"></p>
        <div id="feedback"></div>
    </form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
    $('#newsletter_signup').submit(function() {
        var email_address = $('#email').val();
        $('#feedback').html('Thanks! ' + email_address + ' has been signed up.');
    });
</script>

【问题讨论】：

您需要使用 ajax 发送数据。您当前的实现将数据发送到form 标记中定义的页面（未定义，因此是页面本身），并使用从服务器返回的数据重新加载页面。您还可以选择根据服务器接收到的数据更改页面。

标签： jquery forms confirmation

【解决方案1】：

将您的代码更改为此，改为通过 Ajax 请求提交表单：

$('#newsletter_signup').submit(function(e) {
    e.preventDefault();
    $.post('newsletter_signup', function (data){
       var email_address = $('#email').val();
       $('#feedback').html('Thanks! ' + email_address + ' has been signed up.');
    });   
    return false;
});

【讨论】：

【解决方案2】：

正在提交表单，这会刷新页面。因此，在重新加载页面之前，您的消息会立即显示。您可以使用 ajax 提交表单，这样页面就不会重新加载，或者您可以使用服务器端代码来显示您的感谢信息。

附带说明一下，您的代码容易受到 XSS 的攻击，您会在页面上显示用户的电子邮件地址。

【讨论】：

【解决方案3】：

它正在消失，因为通过提交表单，您基本上是在刷新整个页面。

要解决此问题，您需要做以下三件事之一（可能还有其他方法）：

使用 AJAX 调用提交表单；
更改其背后的代码以在页面往返服务器后返回浏览器时触发消息的出现；或者，
在控制返回时获取的往返行程之前设置一个 cookie，这会触发消息的显示。

大部分功能的实现将特定于您在服务器端使用的语言。

【讨论】：