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

Question

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

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

我的网页

<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>

我的爪哒语

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方法。

我的网页

<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>

我的查询

$(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;
}
});
});
});

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

Answer 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);
}
});
}

Answer 2

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

<form onsubmit="return false">

Answer 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;
}
});
});

}(;