Ajax request when an user type in an form input field

• HTML

<input type="text" name="example" id="example" class="example-class" />
<div id="ajax-example-results"></div>

• Javascript

$('.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

• HTML

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

• Javascript

$('#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

• HTML

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

• Javascript

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