Ajax request when an user type in an form input field
<input type="text" name="example" id="example" class="example-class" />
<div id="ajax-example-results"></div>
$('.example-class').on('keyup', function () {
var value= 'example=' + $(this).val();
$.ajax({
'type': 'post',
'data': data,
'url': 'ajaxExample.php',
'success': function (data) {
$('#ajax-example-results').html(data);
}
});
});
- Server part (PHP example)
if (isset($_POST['example'])) {
// do whatever with the data and echo something to fill "ajax-example-results" div
echo $output;
}
Send Ajax request when an user submit a form
<form id="example-form" name="example-form" method="post" action="">
<label for="model[name]">
<input type="text" name="model[name]" id="model_name" class="example-class" />
<div id="ajax-example-results"></div>
<input type="submit" value="Send">
</form>
$('#example-form').submit(function () {
var formData = $(this).serializeArray();
$.ajax({
'type': 'post',
'data': formData,
'url': 'ajaxFormController.php',
'success': function (data) {
$('#ajax-example-results').html(data);
}
});
});
- Server part (PHP example)
if (isset($_POST['model'])) {
// do whatever with the data and echo something to fill "ajax-example-results" div
echo $output;
}
Send Ajax request with JSON
<form id="example-form" name="example-form" method="post" action="">
<label for="model[name]">
<input type="text" name="model[name]" id="model_name" class="example-class" />
<div id="ajax-example-results"></div>
<input id="form-submit" type="submit" value="Send">
</form>
$('#example-form').submit(function () {
var formData = $(this).serializeArray();
$.ajax({
'type': 'post',
'data': formData,
'url': 'ajaxFormController.php',
'dataType': 'json',
'beforeSend': function (dataJSON) {
$('#ajax-example-results').show();
$('#ajax-example-results').html('Sending...');
$(this).find("button[type='submit']").prop('disabled',true);
},
'success': function (dataJSON) {
if (dataJSON.status === true) {
$('#ajax-example-results').html(dataJSON.html);
} else {
$('#ajax-example-results').html('Error X');
}
$(this).find("button[type='submit']").prop('disabled',false);
},
'error': function (dataJSON) {
$('#ajax-example-results').html('Unexpected error');
$(this).find("button[type='submit']").prop('disabled',false);
}
});
});
- Server part (PHP example)
if (isset($_POST['model'])) {
// do whatever with the data and echo something to fill "ajax-example-results" div
$output = ['status' => true, 'html' => $whatever];
echo json_encode($output);
}