当我调用 ajax 时，它会重新加载窗口答案

【问题标题】：When i call ajax it reloads the window当我调用 ajax 时，它会重新加载窗口
【发布时间】：2020-06-16 09:05:02
【问题描述】：

当我调用 ajax 提交表单数据时，它会重新加载窗口。我怎样才能阻止它？

这是客户的注册码。我正在使用模式提交数据。请给我一些解决这个问题的方法。

我的 HTML

<form  id="newregister">
<div class="form_content clearfix">

    <div class="form-group">
        <label for="firstname">First Name</label>
        <input type="text" class="form-control" " id="firstname_page" name="firstname_page" required>
    </div>

    <div class="form-group">
        <label for="lastname">Last Name</label>
        <input type="text" class="form-control" " id="lastname_page" name="lastname_page"  required>
    </div>
    <div class="form-group">
        <label for="compnay_name">Company Name</label>
        <input type="text" class="form-control" id="compnay_name" name="compnay_name"   required>
    </div>
    <div class="form-group">
        <label for="country_name">Country Name</label>
        <input type="text" class="form-control" id="country_name" name="country_name"   required>
    </div>
    <div class="form-group">
        <label for="email_create">Email address</label>
        <input type="text" class="form-control" id="email_create" required name="email_address_page" >
    </div>
    <div class="form-group">
        <label for="phone_no">Phone No</label>
        <input type="number" class="form-control" id="phone_no"  required name="phone_no" >
    </div>

    <div class="form-group">
        <label for="passwd">Password</label>
        <input class="form-control" type="password"  id="password_page" name="password_page" >
    </div>

    <div class="form-group">

        <button class="btn btn-default button button-medium exclusive" id="SubmitCreates" onclick="newRegister()"> <span>
            <i class="icon-user left"></i>Create an account </span>
        </button>
    </div>
</div>
</form>

我的 JavaScript

function newRegister()
{
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url:'{{ route('web.new.register') }}',
        data:$("#newregister").serialize(),
        type:'post',
        success:function(response)
        {
            alert(response);
        }
    });
}

我的控制器

public function newregister(Request $request)
{
    return response()->json('true');
}

我也用过这个jquery方法。

我的 HTML

<div class="form-group">
    <button class="btn btn-default button button-medium exclusive" type="submit" id="SubmitCreate" onclick="DoLogin()"> <span>
        <i class="icon-user left"></i>Login </span>
    </button>
</div>

我的 Jquery

$(document).ready(function(){
    $('#SubmitCreates').on('click', function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url:'{{ route('web.new.register') }}',
            data:$("#newregister").serialize(),
            type:'post',
            success:function(response)
            {
                alert(response);
                return false;
            }
        });
    });
});

但这也不起作用。请给我一些提示或解决方案来解决这个问题。

【问题讨论】：

标签： javascript laravel laravel-6

【解决方案1】：

您需要防止默认按钮行为： https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault

function newRegister(clickEvent)
{
    clickEvent.preventDefault();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url:'{{ route('web.new.register') }}',
        data:$("#newregister").serialize(),
        type:'post',
        success:function(response)
        {
            alert(response);
        }
    });
}

【讨论】：

【解决方案2】：

该按钮可能会触发表单的提交事件，默认情况下会加载一个页面。您可以通过指定表单元素来覆盖它：

<form onsubmit="return false">

【讨论】：

【解决方案3】：

只需使用事件阻止默认方法

$(document).ready(function(event){
event.preventDefault();
$('#SubmitCreates').on('click', function(){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url:'{{ route('web.new.register') }}',
        data:$("#newregister").serialize(),
        type:'post',
        success:function(response)
        {
            alert(response);
            return false;
        }
    });
});

});

【讨论】：