За последние 24 часа нас посетили 21087 программистов и 1108 роботов. Сейчас ищут 452 программиста ...

Как обработать данные формы переданный через ajax на php?

Тема в разделе "JavaScript и AJAX", создана пользователем MetaleX, 2 мар 2019.

Метки:
  1. MetaleX

    MetaleX Новичок

    С нами с:
    2 мар 2019
    Сообщения:
    3
    Симпатии:
    0
    Добрый день! Столкнулся с проблемой обработки данных формы переданных через AJAX

    Вот код JS который формирует и посылает данные формы:

    Код (Text):
    1. let request = new XMLHttpRequest();
    2.         request.open("POST", "/test.php", true);
    3.        
    4.         request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    5.  
    6.         let myFormData = new FormData(document.querySelector('form'));
    7.         myFormData.append('n','test');
    8.        
    9.         request.send(myFormData);
    10.        
    11.         request.onreadystatechange = function(){
    12.             if( request.readyState < 4 ){
    13.                 statusMessage.innerHTML = message.loading;
    14.                
    15.             } else if(request.readyState === 4){
    16.                 if (request.status == 200 && request.status < 300){
    17.                     statusMessage.innerHTML = message.success + " " + request.responseText;
    18.                     console.log('Ответ сервера: ' + request.responseText)
    19.                 }
    20.             } else {
    21.                 statusMessage.innerHTML = message.failure;
    22.             }
    На стороне сервера исполняется код:
    Код (Text):
    1. $postData = file_get_contents('php://input');
    2. var_dump($postData);
    В результате переменная $postData имеет следующее значение:

    Код (Text):
    1. "------WebKitFormBoundary5JzLNzUygk7B2AIA
    2. Content-Disposition: form-data; name="email"
    3.  
    4. mail@example.ru
    5. ------WebKitFormBoundary5JzLNzUygk7B2AIA
    6. Content-Disposition: form-data; name="tel"
    7.  
    8. 54552155
    9. ------WebKitFormBoundary5JzLNzUygk7B2AIA
    10. Content-Disposition: form-data; name="n"
    11.  
    12. test
    13. ------WebKitFormBoundary5JzLNzUygk7B2AIA--
    14. "
    Вопрос: как привести ЭТО к формату JSON (удалив лишнее) и/или получить значения переменных?
     
  2. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.068
    Симпатии:
    1.231
    Адрес:
    там-сям
    ты смотрел переменную $_POST ?
    зачем тебе на стороне PHP нужен JSON, если в теле запроса он очевидно приходит в другом формате.
    --- Добавлено ---
    Update:
    заголовок "Content-Type","application/x-www-form-urlencoded" говорит принимающей стороне, что данные будут оформлены вот таким образом:

    request.send("foo="+ foo +"&bar="+ bar);

    PHP умеет самостоятельно парсить POST запрос и помещать его в переменную $_POST, если данные соответствуют методу, указанному в заголовке. а ты указал urlencoded, а фактически данные упаковал как multipart
    --- Добавлено ---
    Update 2:
    посмотри здесь как правильно сочетать кодировку данных, которая указывается в заголовке, и метод упаковки:
    https://learn.javascript.ru/xhr-forms
     
    MetaleX нравится это.
  3. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    @MetaleX я вот такими get, post функциями пользуюсь, попробуй:
    Код (Javascript):
    1. function getAjax(url, success) {
    2.     var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    3.     xhr.open('GET', url);
    4.     xhr.onreadystatechange = function() {
    5.         if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
    6.     };
    7.     xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    8.     xhr.send();
    9.     return xhr;
    10. }
    11.  
    12. function postAjax(url, data, success) {
    13.     var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    14.     var params = typeof data == 'string' ? data : Object.keys(data).map(
    15.             function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }
    16.         ).join('&');
    17.  
    18.     var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    19.     xhr.open('POST', url);
    20.     xhr.onreadystatechange = function() {
    21.         if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); }
    22.     };
    23.     xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    24.     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    25.     xhr.setRequestHeader('X-CSRF-Token', token);
    26.     xhr.send(params);
    27.     return xhr;
    28. }
    Использование get:
    Код (Javascript):
    1. getAjax("url", function(data){
    2.     var json = JSON.parse(data);
    3.     console.log(json );
    4. });
    Использование post:
    Код (Javascript):
    1. var a = {
    2.         'name': 'Артурик',
    3.         'nick': ' Hopf'
    4. };
    5.  
    6. postAjax('url', a, function(data){
    7.        var json = JSON.parse(data);
    8.        console.log(json);
    9. });
    Ну и php
    PHP:
    1. if(isset($_POST)){
    2.    $result = $_POST;
    3. }else{
    4.    $result = 'get запрос';
    5. }
    6. return json_encode($result);
     
    MetaleX нравится это.
  4. MetaleX

    MetaleX Новичок

    С нами с:
    2 мар 2019
    Сообщения:
    3
    Симпатии:
    0
    Здравствуйте. Для формирования блока данных использую объект FormData https://learn.javascript.ru/xhr-forms#formdata ,.

    По поводу кодировки попробовал использовать multipart/form-data результат такой же

    PHP:
    1. print_r($_POST);
    2. /*
    3.  
    4. Array
    5. (
    6.     [------WebKitFormBoundaryXJ3n45YxUBmNqBKX
    7. Content-Disposition:_form-data;_name] => "email"
    8.  
    9. mail@example.ru
    10. ------WebKitFormBoundaryXJ3n45YxUBmNqBKX
    11. Content-Disposition: form-data; name="tel"
    12.  
    13. 54552155
    14. ------WebKitFormBoundaryXJ3n45YxUBmNqBKX
    15. Content-Disposition: form-data; name="n"
    16.  
    17. test
    18. ------WebKitFormBoundaryXJ3n45YxUBmNqBKX--
    19.  
    20. )
    21.  
    22. */
    Я за 2 дня просмотрел кучу форумов везде говориться, что так и должно отправляться при использовании объекта FormData, проблема в том что я никак не могу найти как можно извлечь из "этого" нужные мне данные
     
  5. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.068
    Симпатии:
    1.231
    Адрес:
    там-сям
    Я дал ссылку на примеры как надо формировать запрос. Если аккуратно делать, всё получится.
     
    MetaleX нравится это.
  6. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.789
    Симпатии:
    646
    Убрал setRequestHeader?
     
    MetaleX нравится это.
  7. MetaleX

    MetaleX Новичок

    С нами с:
    2 мар 2019
    Сообщения:
    3
    Симпатии:
    0
    Ребят всем огромнейшее спасибо за помощь!

    Да действительно нужно было убрать явное задание кодировки request.setRequestHeader, тогда php корректно заполнит массив $_POST. Кроме того нужно использовать версию PHP7+ (в 5.6 - передача данных данным методом была некорректна)
     
  8. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.789
    Симпатии:
    646
    От версии пыха это не зависит.

    И нужно задавать уточняющие вопросы, если что-то непонятно. Тебе выше целую лекцию прочитали про Content-Type, а ты, видать, сразу не понял и решил проигнорить :(
     
    #8 miketomlin, 3 мар 2019
    Последнее редактирование: 3 мар 2019
    artoodetoo нравится это.