Как отправить форму ajax?

Question

[Александр Иванов]

форма

<form class="login-form" method="post" id="edit_profile_form" action="/profile/edit" enctype="multipart/form-data">
                                <div class="form-group">
                                      <input type="text" id="author" class="form-control bdr" name="name" value="<?=$userDate['name']?>" placeholder="<?=$text_name?>" />
                                      <input type="text" id="author" class="form-control bdr" name="lastname" value="<?=$userDate['lastname']?>" placeholder="<?=$text_lastname?>" />
                                      <input type="email" id="email" class="form-control bdr" name="email" value="<?=$userDate['email']?>" placeholder="<?=$text_email?>" />
                                      <input type="text" id="phone" class="form-control bdr customer_phone" name="phone" value="<?=$userDate['mobile']?>" placeholder="<?=$text_number_mobile?>" />
                                      <input type="text" id="adres" class="form-control bdr" name="adres" value="<?=$userDate['address']?>" placeholder="<?=$text_adres?>" />
                                      <select name="person" id="type_person" class="fq-select-option">
                                        <option value="0"><?=$text_select_type_person?></option>
                                        <?php foreach($type_person as $tp): ?>
                                        <option value="<?=$tp['index']?>" <?=($tp['type'] == $userDate['type'])?'selected':''?>><?=$tp['name']?></option>
                                        <?php endforeach ?>
                                      </select>
                                      <?php if($userDate['type'] == 'legal'): ?>
                                        <?php if(!empty($type_company)): ?>
                                        <select name="type_company" id="type_company" class="fq-select-option">
                                            <option value="0">-Select-</option>
                                            <?php foreach($type_company as $tc): ?>
                                            <option value="<?=$tc['id']?>" <?=($tc['id'] == $userDate['idTypeCompany'])?'selected':''?>><?=$tc['name']?></option>
                                            <?php endforeach ?>
                                        </select>
                                        <?php endif ?>
                                    <?php endif ?>
                                    <input type="text" name="p_iva" style="display:none;" id="p_iva" value="<?=$userDate['patent']?>" placeholder="<?=$text_p_iva?>" class="form-control bdr g_user" />
                                    <input type="text" name="company_name" style="display:none;" id="company_name" value="<?=$userDate['company_name']?>" placeholder="<?=$text_company_name?>" class="form-control bdr g_user" />
                                    <input type="text" name="company_link" style="display:none;" id="company_link" value="<?=$userDate['company_link']?>" placeholder="<?=$text_company_link?>" class="form-control bdr g_user" />
                                    <input type="text" name="about" value="<?=htmlspecialchars_decode($userDate['about'])?>" placeholder="<?=$text_field_about?>" class="form-control bdr g_user" />
                                    <?=$text_field_img_logo?> <input name="file" type="file" name="profile_logo" id="input__file" class="input input__file" /><label for="input__file" class="input__file-button">
                                      <span class="input__file-icon-wrapper"><img class="input__file-icon" src="/Media/img/icon-track.png" alt="<?=$text_select_file?>" width="25" /></span>
                                      <span class="input__file-button-text"><?=$text_select_file?></span>
                                   </label>
                                </div>
                                  <div class="form-group">
                                    <span id="loader"></span> <input type="submit" name="submit" id="save_edit_btn" class="btn btn-submit btn-gradient" value="Save edit" />
                                  </div>
                                  <ul id="ajax_result"></ul>
                              </form>

запрос

$('#edit_profile_form').on('submit', function (e){
            e.preventDefault();
            
            $.ajax({
                url: $(this).attr('action'),
                type:'post',
                contentType: false,
                processData: false,
                data: new FormData($(this).get(0)),
                dataType: 'json',
                cache: false,
                beforeSend: function () {
                    $('span#loader').css('display', 'block');
                    $('span#loader').html("<img src='/Media/img/Randi.gif' />");
                },
                error: function(req, text, error){ // отслеживание ошибок во время выполнения ajax-запроса
                    console.error('Упс! Ошибочка: ' + text + ' | ' + error);
                  },
                success: function (result) {
                    $('#ajax_result').empty();
                    
                    if(result.errors.length > 0) {
                        $.map(result.errors, function(item) {
                          $('#ajax_result').append('<li class="error_list_icon">' + item + '</li>');
                        });
                    } else {
                        $('#ajax_result').append('<li class="addedSuccess">' + result.success + '</li>');
                        $('span#loader').empty();
                    }
                }
            });
        });

выходит ошибка "Упс! Ошибочка: parsererror | SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON" не могу понять почему

ответ от сервера echo json_encode($_POST);
чтоб увидеть что вообще приходит в пост на сервер

{"name":"LavoroPadova","lastname":"EDintorni","email":"[e-mail]","phone":"[phone]__","adres":"Trichy, Tamil Nadu, India","person":"4","p_iva":"10981420960","company_name":"Manpower SRL","company_link":"https:\/\/www.manpower.it\/","about":"Tinteggiatura, restauri, ringiere, balconi, finestre, pittore edile"}

почему-то, как видно нет полей после input[name=about], а именно input[name= file] input[name=submit]

Comments

[Дмитрий]

А если без этого
contentType: false ?

Либо не json возвращается.

[Александр Иванов]

Дмитрий, пробовал и без этого, та же ошибка

Answer 1

[Rsa97]

От бэкенда возвращается не JSON.

Answer 2

[Надим]

Очевидно, что твой сервак возвращает кривой ответ, это либо некорректный JSON или он у тебя вообще не JSON отдает. Внутри функции success выставь в начале:
console.dir(result);

В консоли сможешь посмотреть, что там за результат отдаёт твой сервер.

Answer 3

[Андрей Ежгуров]

Так это сервер ошибку разбора JSON возвращает. А возникает она потому, что объект, передаваемый в data:, кодируется не в JSON, а в application/x-www-form-urlencoded. А dataType: 'json' - это не то, в каком формате передаём, а то, в каком формате ожидаем ответ от сервера.

И если надо передать объект серверу в JSON, то это делается так:

data: JSON.stringify(new FormData($(this).get(0))),

Comments

[Александр Иванов]

а таким методом data: JSON.stringify(new FormData($(this).get(0))), вообще данные на сервер не доходят

[Андрей Ежгуров]

Александр Иванов, В таком случае, остаётся нажать F12 в браузере и смотреть, что реально происходит в коде и какие именно данные отправляются на сервер.