阻止Ajax调用后页面刷新 [英] Prevent page from refreshing after an ajax call
问题描述
我有一个引导表单,该信息是使用ajax调用从中保存到json文件的信息.
I have a bootstrap form the info from which I am saving to a json file using an ajax call.
我的问题是,当我按下提交"按钮时,页面似乎在调用后刷新(单击提交"按钮后执行),这是我绝对希望避免的事情.
My problem is that when I press the Submit button the page seems to refresh after the call(executed after the submit button is clicked), which is something i'd definitely like to avoid.
我试图调查这个问题,但是由于我对这些概念都不了解,因此我的知识不足.
I tried to investigate the problem, but my knowledge is insufficient for that as I don't have an indepth understanding of any of these concepts.
这是我的学士学位表格:
Here is my BS form :
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Full Name:</label>
<div class="col-sm-2">
<input type="name" class="form-control" id="nameFull">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="phone">Phone:</label>
<div class="col-sm-2">
<input type="phone" class="form-control" id="phoneApp">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="emailApp">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="date">Date:</label>
<div class="col-sm-2">
<input type="date" class="form-control" id="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="text">Hour:</label>
<div class="col-sm-2">
<select class="form-control" id="time">
<option value="Time" class="">Time</option>
<option value="10am" class="">10:00-10:30</option>
<option value="1030am" class="">10:30-11:00</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2" for="reason">Reason:</label>
<div class="col-lg-3">
<textarea class="form-control" id="reason" name="comments" placeholder="Describe the reason to make an appointment here. Please, include symptoms and any historical data that may help us determine your case." rows="5"></textarea><br>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="saveAppt" class="btn btn-default">Submit</button>
</div>
</div>
</form>
这是ajax调用:
$(document).ready(function() {
$("#saveAppt").click(function(){
var fullName = $("#nameFull").val();
var userName = $("#cpr").val();
var phone = $("#phoneApp").val();
var email = $("#emailApp").val();
var date = $("#date").val();
var time = $("#time").val();
var reason = $("#reason").val();
console.log(time);
console.log(date);
console.log(reason);
var jAppointment= {};
jAppointment.fullName = fullName;
jAppointment.userName = userName;
jAppointment.phone = phone;
jAppointment.email = email;
jAppointment.date = date;
jAppointment.time = time;
jAppointment.reason = reason;
console.log(JSON.stringify(jAppointment));
$.ajax
({
type: "GET",
dataType : 'json',
async: false,
url: 'save-appointments.php',
data: { data: JSON.stringify(jAppointment) },
success: function () {console.log("Thanks!"); },
failure: function() {console.log("Error!");}
});
});
});
推荐答案
现在,什么提交操作刷新您的页面,因为<button>
标记的默认值为type='submit'
,所以只需添加type='button'
类型,就不会引发click事件.避免提交/刷新:
Now what the submit action refresh your page the click event will never be raised since the <button>
tag has type='submit'
by defaul just add type='button'
type to avoid submit/refresh :
<button type="button" id="saveAppt" class="btn btn-default">Submit</button>
希望这会有所帮助.
$(document).ready(function() {
$("#saveAppt").click(function(){
var fullName = $("#nameFull").val();
var userName = $("#cpr").val();
var phone = $("#phoneApp").val();
var email = $("#emailApp").val();
var date = $("#date").val();
var time = $("#time").val();
var reason = $("#reason").val();
console.log(time);
console.log(date);
console.log(reason);
var jAppointment= {};
jAppointment.fullName = fullName;
jAppointment.userName = userName;
jAppointment.phone = phone;
jAppointment.email = email;
jAppointment.date = date;
jAppointment.time = time;
jAppointment.reason = reason;
console.log(JSON.stringify(jAppointment));
$.ajax
({
type: "GET",
dataType : 'json',
async: false,
url: 'save-appointments.php',
data: { data: JSON.stringify(jAppointment) },
success: function () {console.log("Thanks!"); },
failure: function() {console.log("Error!");}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Full Name:</label>
<div class="col-sm-2">
<input type="name" class="form-control" id="nameFull">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="phone">Phone:</label>
<div class="col-sm-2">
<input type="phone" class="form-control" id="phoneApp">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="emailApp">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="date">Date:</label>
<div class="col-sm-2">
<input type="date" class="form-control" id="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="text">Hour:</label>
<div class="col-sm-2">
<select class="form-control" id="time">
<option value="Time" class="">Time</option>
<option value="10am" class="">10:00-10:30</option>
<option value="1030am" class="">10:30-11:00</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2" for="reason">Reason:</label>
<div class="col-lg-3">
<textarea class="form-control" id="reason" name="comments" placeholder="Describe the reason to make an appointment here. Please, include symptoms and any historical data that may help us determine your case." rows="5"></textarea><br>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type='button' id="saveAppt" class="btn btn-default">Submit</button>
</div>
</div>
</form>
<br><br><br><br><br><br>
这篇关于阻止Ajax调用后页面刷新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!