Ajax как отправить данные из формы?

Question

[survivor2005]

Добрый день, дошел до асинхронного js, в частности интересует отправка данных из формы.
Есть простая форма:

<form action="#" name="form" method="POST">
        <input type="text" name="name" value="blalba">
        <input type="email" name="email" value="[e-mail]">
        <input type="tel" name="phone" value="34343">
        <button type='submit'>отправить</button>
    </form>

и написал скрипт:

let sendingStatus = {
    sending: 'отправка...',
    sent: "отправлено",
    fail: "Что то пошло не так...."
}



let form = document.forms.form,
input= form.querySelectorAll('input'),
statusMessage = document.createElement('div');
statusMessage.classList.add('status');

form.addEventListener('submit',(event)=>{
     event.preventDefault();
    form.append(statusMessage);
   
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "form/mail.php",true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    let formData = new FormData(form);
     xhr.send(formData);
    xhr.onreadystatechange=()=>{
        if(xhr.readyState<4){
            statusMessage.innerHTML=sendingStatus.sending;
        }else if(xhr.readyState===4){
            if(xhr.status == 200 && xhr.status<300){
                statusMessage.innerHTML=sendingStatus.sent;
                for(let i of input){
                    i.value='';
                }
            }else statusMessage.innerHTML=sendingStatus.fail;
        }
    };
 });

Код отрабатывает, но данные из формы не забираются, форма приходит без данных. Не подскажите как из передать?
Спасибо.

Answer 1

[Евгений]

Запустил ваш код, судя по всему, данные формы отправляются.

PS: Используете стрелочные функции, почему бы не использовать современный fetch, async/await?

Comments

[survivor2005]

решил начать с простого. Далее двинусь на них. Но у меня тут затыки. Не знаю почему объект dataform пустой.

[Михаил]

survivor2005, возможно из-за заголовка

[survivor2005]

Михаил, xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); Это?

[Евгений]

survivor2005, dataform не пустой, у него есть методы, например get( 'имя поля' ) вернёт его значение, и оно не пустое, проверил. Подробнее про объект формы можно почитать на https://developer.mozilla.org/ru/ Также можно посмотреть в консоли crome post-запрос, он имеется, но выглядит не как обычно:

[Евгений]

survivor2005, уберите сетап заголовка, эту строку:

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

и данные формы нормально передадутся:

[survivor2005]

Евгений, не до понял Вас, убрать всю строку ? xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); Или что то из нее убрать?

[Евгений]

survivor2005, строку удалите. Вообще, вам x-www-form-urlencoded без необходимости.

[survivor2005]

Евгений, наверное у меня еще что то с php, потому что с удалением этой строки у меня совсем ничего не приходит. Но в пхп я уж точно не рублю( Не знаю как вывести ошибки

[Евгений]

survivor2005, смотрите в консоли что прилетает в ответе. Самое простое в php файле в ответе на "POST" отправить обратно $_POST, посмотреть в консоли хром какой ответ приходит, и уже дальше копать, т.е. что-то типа такого в php файле:

if( $_POST ) {
    echo json_encode( $_POST );
    die;
}

Этот код пришлёт обратно, что было послано POST запросом из формы. Но опять-же я не знаю что у вас там за бэкенд, какие заголовки он послал уже и т.д. это нужно всё смотреть.

[survivor2005]

Евгений, странно но с утра все заработало)))))))))))))) Спасибо