В вашем коде есть несколько проблем, о которых вы, вероятно, не знаете.
Прежде всего, вся ваша страница перезагружается каждый раз, когда вы нажимаете кнопку "Enviar", потому что ваш javascript неправильно предотвращает действие по умолчанию.
Для этого верните false вконец функции:
var form = document.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault(); // <--- isto pára o envio da form
var url = this.action; // <--- o url que processa a form
var formData = new FormData(this); // <--- os dados da form
var ajax = new XMLHttpRequest();
ajax.open("POST", url, true);
ajax.onload = function() {
if (ajax.status == 200) {
var dados = JSON.parse(ajax.responseText);
alert('Dados enviados:\n' + JSON.stringify(dados, null, 4));
} else {
alert('Algo falhou...');
}
};
ajax.send(formData);
return false;
});
При этом вся страница не будет перезагружена.
Во-вторых, ваш сервер всегда возвращает полную HTML-страницу, вместо того, чтобы различать, является лиURL-адрес был открыт при первом открытии страницы или при получении запроса от вашего скрипта.
Если isset($_POST['cartao'] истинно, то запрос пришел из вашего javascript, и вы должны вернуть объект JSON, содержащий соответствующие данные, и встроить html в свой javascript и добавить его в свою таблицу.
Я знаю, что все это немного сбивает с толку, если вы не программист, но я надеюсь, что смогу указать вам верное направление.
Как только вы вернете объект JSON со своего сервера, я с удовольствиемпомочь вам сделать HTML из него в javascript.