Блог

Главная - Вопросы по программированию - XMLHttpRequest и FormData не отправляют данные

XMLHttpRequest и FormData не отправляют данные

#javascript #php #xmlhttprequest #form-data

Вопрос:

Я пытаюсь отправить форму через ajax, используя post метод и FormData объект.

Вот упрощенная версия JavaScript:

 var form=…; //  form element
var url=…;  //  action
form['update'].onclick=function(event) {    //  button name="update"
    var xhr=new XMLHttpRequest();
        xhr.open('post',url,true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    var formData=new FormData(form);
        formData.append('update', true);    // makes no difference
    xhr.send(formData);
    xhr.onload=function() {
        alert(this.response);
    };
};

Форма имеет:

  • кнопка ( type="button" name="update" ) для запуска скрипта
  • нет action и method="get"

Мой PHP-скрипт имеет следующее:

 if(isset($_POST['update'])) {
    print_r($_POST);
    exit;
}

//  more stuff

print 'other stuff';

Когда я пытаюсь это сделать, PHP переходит к остальной части кода, и я получаю другой вывод, а не то, что я ожидаю от print_r оператора.

Я попробовал следующие варианты:

  • new FormData() (без формы). Это работает, если я добавляю update данные вручную.

  • new FormData(form) . Это не работает, независимо от того, добавляю я update его вручную или нет.
  • изменение метода формы на post .
  • Firefox, Safari и Chrome на macOS; все текущие версии.

Само по себе выглядит примерно так:

 <form id="edit" method="post" action="">
    <p><label for="edit-summary">Summary</label><input id="edit-summary" name="summary" type="text"></p>
    <p><label for="edit-description">Description</label><input id="edit-description" name="description" type="text"></p>
    <p><label for="edit-ref">Reference</label><input id="edit-ref" name="ref" type="text"></p>
    <p><label for="edit-location">Location</label><input id="edit-location" name="location" type="text"></p>
    <p><button type="button" name="update">OK</button></p>
</form>

Что я должен сделать, чтобы отправить это на работу?

Без jQuery, пожалуйста.

Комментарии:

1. Как выглядит ваша HTML-форма?

2. @E. Сундин См. отредактированную версию вопроса …

Ответ №1:

Тип содержимого при отправке объекта FormData-составные данные/данные формы, не закодированные по URL.
Кроме того, для запроса должна быть установлена надлежащая граница, что пользователь не может сделать. Для этого XMLHttpRequest задает правильный тип контента с требуемой границей.
поэтому все, что вам нужно сделать, это не задавать тип контента, и он будет работать.

 var xhr=new XMLHttpRequest();
xhr.open('post',url,true);
//xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");<--don't do this
var formData=new FormData(form);
formData.append('update', true);    // makes no difference
xhr.send(formData);
xhr.onload=function() {
    alert(this.response);
};

Комментарии:

1. Спасибо за ответ. Удаление этой строки, безусловно, заставило его работать. Честно говоря, я не помню, где я вообще взял эту фразу.

2. Просто для потомков, я думаю, что xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); это следует использовать при отправке почтовых данных, которые не исходят от FormData объекта.

3. @Manngo Есть ли источник, связанный со спецификациями, в котором говорится: «При отправке данных формы через XMLHttpRequest используйте multipart/form-data «? (звучит вполне очевидно в такой формулировке, но все же)

Ответ №2:

Измените название кнопки на что-то другое, кроме «обновить» (и измените его form['update'].onclick... также в своем). Я думаю, что это противоречит значению, которое вы пытаетесь установить в данных формы для запуска PHP-кода.

Метки: