Question

我正在为一个我知道的跑步俱乐部创建一个网站，它上面有一个联系表格，目前正在重定向到成功的“谢谢”页面。我正在尝试避免其他页面和重定向，所以我希望它能够在弹出窗口中显示成功消息。

一位朋友推荐谷歌搜索JQuery Post，但我不太明白它，所以想知道这里是否有人可以给我一些帮助或链接我的教程或什么？

提前致谢

Answer 1

<!--Add an ID to your form-->
<form action="something" method="post" id="formId">
    <!--Your form goes here-->
    <input type="submit" value="Submit button"/>
</form>

现在你的jQuery / Javascript看起来像这样！

<script>
    $('#formId').on('submit',function(e){
        e.preventDefault();//this stops your page from default action
        //now serialize form and make $.ajax() request.
        //on response show success but you may now chose not to reload the page
    });
</script>

这是一个可能有用的链接 Submitting HTML form using Jquery AJAX

Answer 2

你对jQuery / Ajax有多熟悉？

您要做的是让jQuery使用ajax提交表单而不是浏览器提交整个表单。

您想要这样做：

开启$.document.ready使用form.submit注册事件处理程序。
在处理程序中，阻止表单像通常使用event.preventDefault一样提交。这将阻止重定向。在您的代码有错误的情况下
使用serialize
使用$.post执行异步发布查询。确保提供失败和成功处理程序。

链接中有足够的代码示例+我相信阅读文档，以便您了解代码的作用。

我认为preventDefault调用应该在最后。如果您的代码有错误，表单将返回默认的提交方法（具有您想要避免的重定向的方法。但至少它会继续工作）

如何在成功时没有页面重定向的情况下提交联系表单

2 个答案: