jquery - 按下按钮（但不是）并发送表格但不要离开当前页面

Question

如何在不离开当前页面的情况下按下按钮（<input type="button">但不是<input type="submit">）发送表单，并且不刷新它并显示成功消息，例如“您的表单已成功发送！”？我想我需要为此使用 jQuery ......不是吗？

例如，我正在使用此代码：

<form name="myform" action="SendForm.jsp" method="post">
   Username: <input type="text" name="user">
   <input type="button" id="b1" value="Send">
</form>

提前致谢！

Answer 1

如果您不想刷新页面，则需要ajax。

jQuery 中的演示

<form name="myform" action="SendForm.jsp" method="post" id="myForm">
   Username: <input type="text" name="user">
   <input type="button" id="b1" value="Send">
</form>

$("#b1").on("click", function(){
    $.ajax({
        url: 'SendForm.jsp',
        type: 'POST',
        data: $("#myForm").serialize(),
        success: function(){
            alert("Your form has been successfully sent!");
        }
    });
});

Answer 2

如果您需要它与按钮类型一起使用。在您的发送按钮中，您将添加一个 onclick 事件

<input type="button" id="b1" value="Send" onclick="myfunction();">

然后您将编写一个使用 AJAX 发送数据的 JS 函数

function myfunction() {
    jQuery.ajax({url: 'my/url/here'}).done(function () { /*do something here*/ });
}