不要在提交表单时重定向答案

【问题标题】：Don't redirect on submitting form不要在提交表单时重定向
【发布时间】：2018-05-16 19:24:38
【问题描述】：

我有一个简单的基于 HTML 的表单，如下所示，它会在点击时不断刷新页面。

<form id="register" action="#" method="POST">
    <div class="input-group">
        <input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text">
        <input type="hidden" name="form" value="register">
        <input type="hidden" name="type" value="websiteregistration">
        <span class="input-group-append">
            <button type="submit" class="btn btn-light" data-name="register" onclick="formSubmit(this)">Go!</button>
        </span>
    </div>
</form>

我试图阻止它在按下提交按钮时重定向。

(function($) {
    function formSubmit(e){
        e.preventDefault(); //This will prevent the default click action
        e.stopPropagation();

        var frm = $('#'+ $(this).data('name') +'');

        $.ajax({
            type: frm.attr('method'),
            url: '(url)',
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            }
        });

        return false;
    }
});

我添加了 return false 以阻止它重定向，以及 PreventDefault，但是在发送数据时页面仍然刷新（顺便说一下正在发送数据）。

我也尝试使用 $().submit 来完成，但结果相同。（出于安全原因，我隐藏了网址，但提交本身可以工作）。

使用 name-data 属性是因为我在页面上有几个相同的表单，这样我可以使其可重用

【问题讨论】：

收听表单的submit事件而不是按钮的click。
从你的表单标签中移除action属性，然后监听表单的submit事件。
试过（如我上面所说）仍然不起作用
将<button type="submit"更改为<button type="button"

标签： javascript jquery html ajax

【解决方案1】：

使用event 而不是this

formSubmit(event)

并删除不必要的代码：

function formSubmit(e){
    e.preventDefault(); //This will prevent the default click action

    var frm = $('#'+ $(this).data('name') +'');

    $.ajax({
        type: frm.attr('method'),
        url: '(url)',
        data: frm.serialize(),
        success: function (data) {
            console.log('Submission was successful.');
            console.log(data);
        },
        error: function (data) {
            console.log('An error occurred.');
            console.log(data);
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="register" action="#" method="POST">
	<div class="input-group">
		<input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text">
		<input type="hidden" name="form" value="register">
		<input type="hidden" name="type" value="websiteregistration">
		<span class="input-group-append">
			<button type="submit" class="btn btn-light" data-name="register" onclick="formSubmit(event)">Go!</button>
		</span>
	</div>
</form>

【讨论】：

【解决方案2】：

尝试删除 type="submit" 属性并将其更改为 type='button' 并将参数从 'this' 更改为 'event'：

<button type="button" class="btn btn-light" data-name="register" onclick="formSubmit(event)">Go!</button>

【讨论】：

另外，您可以删除 e.preventDefault();和 e.stopPropagation();无需添加这两行
尝试监听 onsubmit 事件，就像 'Teemu' 说的那样
如果你删除 type= 属性，它将使用默认值，即......等待......submit - 所以你需要指定@ 987654324@

【解决方案3】：

给出 type="button" 而不是 submit 并且删除 e.preventDefault();和 e.stopPropagation();无需添加这两行。

function formSubmit(e){

    var frm = $('#'+ $(this).data('name') +'');

    $.ajax({
        type: frm.attr('method'),
        url: '(url)',
        data: frm.serialize(),
        success: function (data) {
            console.log('Submission was successful.');
            console.log(data);
        },
        error: function (data) {
            console.log('An error occurred.');
            console.log(data);
        }
    });

    return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="register" action="#" method="POST">
                                        <div class="input-group">
                                            <input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text">
                                            <input type="hidden" name="form" value="register">
                                            <input type="hidden" name="type" value="websiteregistration">
                                            <span class="input-group-append">
                                                <button type="button" class="btn btn-light" data-name="register" onclick="formSubmit(this)">Go!</button>
                                            </span>
                                        </div>
                                    </form>
									
								
									
									</body>
									</html>

【讨论】：