javascript - 提交后弹出窗口通知

Question

我有一个包含多个字段的表单，我想在用户正确填写表单后打开一个弹出窗口

首先，我不知道为什么这行简单的代码行不通

<form>

  <input type="submit" value="submit" onsubmit="javascript:alert('success');" />

</form>

我已检查用户是否已正确创建，这意味着提交没问题，但我没有收到警报窗口

你能解释一下吗？

Answer 1

这更多地回答了您问题的第一部分，涉及您在提交表单后如何与用户交互，您可能还想验证该表单。它没有回答您更具体的问题:“为什么 onsubmit 不起作用？”对于这个答案，还有其他几个很好的答案(特别是 Canon's 引用了 onsubmit 属性的不正确位置。

有了这个……

根据您想要的用户交互类型，在提交表单后，您可能会对使用 JavaScript 研究 XHR (XMLHttpRequest) 感兴趣。您可以在没有库的情况下在纯 JavaScript 中执行此操作，但是如果您想要一种以异步方式处理请求和响应的良好、可靠的方法，我会查看 jQuery 库，特别是 .post()方法。

jQuery 将允许您在提交表单之前和之后做一些事情。如果您想在将表单发送到服务器之前验证表单的内容，您可以这样做。 jQuery 还将使您能够根据从服务器返回的响应对成功、失败和“总是”的交互使用react，这样您就可以更好地为用户定制您想要的用户体验。

下面是一个非常简单的示例，展示了如何序列化表单并将其发布到 URL(在下面的示例中，在 action 的 form 属性中定义的 URL)并接收返回的响应。然后，您可以根据需要处理该响应(如果它是 JSON 或 XML/HTML)。

$('form').submit(function(/*DOMEvent*/ e){
  e.preventDefault();

  var url = $(this).attr('action'),
      data = $(this).serialize();
  $.post(url, data, function(response){
    /* Do something with the response, here we'll just log it to the console */
    console.log(response);
  });
});

同样，这只是一个简单的例子。