所以我有一个表格，我想通过AJAX提交。我在后端使用bootstrap，bootstrap材料设计，jquery和PHP codeigniter。
这是我的问题：我希望html5 / bootstrap验证能够正常工作，但我希望POST请求通过AJAX而不是通过重定向发送。因此event.preventDefault()不是一种选择......或者我认为。
任何帮助都是赞成的，谢谢！
这是我的JS
$(document).ready(function(){
$.material.init();
$(".submit_form").click(function(event){
if ($('.reservation_form')[0].checkValidity()){
$('.app_loading').fadeIn('fast');
var input=$('.reservation_form :input');
var values = {};
var i=0;
console.log(input);
input.each(function() {
if (i==5){
values[i] = $(this).val();
}
else{
values[i] = $(this).val();
i++;
}
});
console.log(values);
jQuery.ajax({
type: "POST",
url: "https://code-igniter-blog-asergey91.c9users.io/index.php/reservation/make_reservation",
dataType: 'json',
data: {
email: values[0],
first_name: values[1],
last_name: values[2],
tel: values[3],
size: values[4],
start: values[5],
},
success: function(){
},
fail: function(){
$('.app_loading').fadeOut('fast');
$('.error_capacity').fadeIn('fast');
}
});
}
else{
$('.app_loading').fadeIn('fast');
$('.app_loading').fadeOut('fast');
}
});
});
这是我的HTML
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4'>
<div class='well customer_input'>
<form class="form-horizontal reservation_form">
<fieldset>
<legend class='text-center'>Make a Reservation</legend>
<div class='text-center'>Opening Hours:<br>Mon-Sat<br>8:00 AM - 8:00 PM</div>
<div class="form-group">
<label for="inputEmail" class="col-md-2 control-label">Email</label>
<div class="col-md-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputFirstName" class="col-md-2 control-label">First Name</label>
<div class="col-md-10">
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-md-2 control-label">Last Name</label>
<div class="col-md-10">
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<label for="inputTel" class="col-md-2 control-label">Tel(+32)</label>
<div class="col-md-10">
<input type="tel" class="form-control" id="inputTel" placeholder="Telephone Number" required>
</div>
</div>
<div class="form-group">
<label for="inputParty" class="col-md-2 control-label">Party Size</label>
<div class="col-md-10">
<select id="inputParty" class="form-control" required>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputTime" class="col-md-2 control-label">Date+Time</label>
<div class="col-md-10">
<input type="datetime-local" class="form-control" id="inputTime" required>
</div>
</div>
<div class='app_loading text-center'>
<br>
<img src='../../assets/img/loading-dots.gif'>
</div>
<div class="form-group app_submit">
<div class='text-center'>
<button type="submit" class="btn btn-primary btn-raised submit_form">Submit</button>
</div>
</div>
</fieldset>
</form>
<div class="alert alert-dismissible alert-danger error_capacity">
<button type="button" class="close" data-dismiss="alert">×</button>
Sorry, this is an error message
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4'>
<div class='well customer_success'>
<h1 class='text-center'><span class='glyphicon glyphicon-ok'></span><br><br>Your Reservation Has Been Made<br><br>Thank You<br></h1>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
Jquery Forms会很有用。这将使用Ajax提交您的表单而无需重定向。
示例代码：
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
target: '#output2', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind to the form's submit event
$('#myForm2').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
}
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
答案 1 :(得分：0)
尝试使用
$( "form" ).submit(function( event ) {
event.preventDefault();
});
请记住，您不必听取任何表单提交按钮的点击，因为表单中的任何按钮都会自动提交，因为这是默认行为
答案 2 :(得分：0)
尝试添加
返回false;
$(".submit_form").click(function(event){
if ($('.reservation_form')[0].checkValidity()){
$('.app_loading').fadeIn('fast');
var input=$('.reservation_form :input');
var values = {};
var i=0;
console.log(input);
input.each(function() {
if (i==5){
values[i] = $(this).val();
}
else{
values[i] = $(this).val();
i++;
}
});
console.log(values);
jQuery.ajax({
type: "POST",
url: "https://code-igniter-blog-asergey91.c9users.io/index.php/reservation/make_reservation",
dataType: 'json',
data: {
email: values[0],
first_name: values[1],
last_name: values[2],
tel: values[3],
size: values[4],
start: values[5],
},
success: function(){
},
fail: function(){
$('.app_loading').fadeOut('fast');
$('.error_capacity').fadeIn('fast');
}
});
}
else{
$('.app_loading').fadeIn('fast');
$('.app_loading').fadeOut('fast');
}
return false;