Попытка получить AJAX POST JSON на той же странице индекса

Question

Я пытаюсь передать значение AJAX JSON POST на одну и ту же страницу без обновления при каждом нажатии одной из кнопок. После нажатия кнопки я хочу выполнить определенный класс или метод т.е. Добавить, обновить или удалить.

Я получил значение POST на той же странице, но со строкой HTML. Я устал добавлять все ресурсы онлайн, чтобы решить проблему, но не повезло (IE; JSON .stringify, json_decode, JSON .Parse et c.)

echo $_POST['type'];
if (isset($_POST['type'])) 
{
    echo json_decode($_POST['type']);
}

<a id="btnAdd" class="btnType" href="#" role="button">ADD</a><br>
<a id="btnUpdate" class="btnType" href="#" role="button">UPDATE</a><br>
<a id="btnDelete" class="btnType" href="#" role="button">DELETE</a>

$(document).ready(function() {
  $('.btnType').click(function(ev) {
    ev.preventDefault();
    ev.stopImmediatePropagation();

    var pageType;
    if ($(this).attr('id') === 'btnAdd') {
      pageType = 'add';
    } else if ($(this).attr('id') === 'btnUpdate') {
      pageType = 'update';
    } else if ($(this).attr('id') === 'btnDelete') {
      pageType = 'delete';
    }

    $.ajax({
      type: 'POST',
      dataType: 'json',
      data: {
        type: pageType
      },
      success: function(data) {
        console.log(data);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        $('#msg').html('<p>status code: ' + jqXHR.status +
          '</p><p>errorThrown: ' + errorThrown +
          '</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText +
          '</div>');
        console.log('jqXHR:');
        console.log(jqXHR);
        console.log('textStatus:');
        console.log(textStatus);
        console.log('errorThrown:');
        console.log(errorThrown);
      }
    });
  });
});

См ошибку я получаю