Не выводит ответ сервера в браузере

@wolfz · Регистрация: 25.01.2015

Студворк — интернет-сервис помощи студентам

Привет!

Помогите разобраться, почему не выводится ответ в браузере, если смотреть в консоли разработчика POST данные уходят и приходит ответ, который нужно вывести на странице...но ни в какую не хочет

HTML5
1
2
3
4
5
6
<form id="formModel" action="control" name="nameformModel" enctype="multipart/form-data">
                  <input type="text" name="title" required>
                  <input type="text" name="meta_t" required>
           </form>
       <button type="submit" name="submit" onclick="submitForm(event, 'create')" id="btnSubmit" >Создать</button>
           <div class="box-body" id="box-body2"></div>

Скрипт

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function submitForm(event, action){
event.preventDefault();
event.stopPropagation();
let form = document.forms.nameformModel;
let url = form.action;
let data = new FormData(form )
data.append("action", action);
var akaxOptions = { method: 'POST',               
               mode: 'cors',
               credentials: 'include',
               body:data 
              };
 
fetch(form.action,akaxOptions ).then(function(response){
 return response.json();
}).then(function(json){
form.reset();
form.submit.value= "Отправлено";
 
let target = document.getElementById("box-body2");
if(json.html!== undefined){
target.innerHTML = json.html;
}
 
}).catch(function(e){
console.log("Ошибка", e);
});
}

PHP обработчик

PHP
1
2
3
4
5
6
if(isset($_POST['action']) && $_POST['action'] == 'create') 
{   
 $response = '<div>тут то что вы хотите отобразить на клиенте</div>';
}
 
echo json_encode($response);

@amr-now · 23.01.2019, 20:46

Доброго времени суток!
Вот пока допинал fetch ещё без обработчика ошибок.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <form id="formModel" action="control" name="nameformModel" enctype="multipart/form-data" method="POST">
        <input type="text" name="title" required>
        <input type="text" name="meta_t" required>
        <button type="button" name="submit" id="btnSubmit">Создать</button>
    </form>
    <div class="box-body" id="box-body2"></div>
    <script>
        document.getElementById("btnSubmit").onclick = event => { submitForm(event, "create"); };
 
        async function submitForm(event, action) {
            let form = document.forms.nameformModel;
            let url = form.action;
            let data = new FormData(form);
            data.append("action", action);
 
            let ajaxOptions = {
                method: 'POST',
                mode: 'cors',
                credentials: 'include',
                body: data
            };
            let response = await fetch(url, ajaxOptions); // Ответ само собой надо дождаться
            let text = await response.text(); // Текст ответа тоже надо дождаться
            document.getElementById("box-body2").innerHTML = text;
        }
    </script>
</body>
</html>

Добавлено через 11 минут
Супер-секретные данные об объекте настроек fetch:
https://docs.microsoft.com/ru-... 9(v=vs.85)

Добавлено через 2 часа 9 минут
Плюс с MDN:
https://developer.mozilla.org/... cope/fetch

@Mr_Sergo · 23.01.2019, 23:27

wolfz,

Как вариант, для усвоения fetch
Попробовать в действии -> http://some-test.onlinewebshop... -comments/

HTML5
1
2
3
4
5
6
<form action="control.php" id="formModel">
    <input type="text" name="title">
    <input type="text" name="meta_t">
    <button type="submit" onclick="submitForm(event)">Создать</button>
</form>
<div id="box-body2"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function submitForm(e){
    e.preventDefault();
 
    let form = document.querySelector('#formModel');
    let data = new FormData(form);
 
    data.append('action','create');
 
    fetch(form.action, {
        method: 'POST',
        body: data
    })
    .then(response => response.json() )
    .then(data => {
        document.querySelector('#box-body2').innerHTML = data.resp;
        document.querySelector('#box-body2').innerHTML += data.meta_t;
    });
}
 
 
//  1   строка -  Предотвращаем стандартное действие браузера при отправке формы
//  4   строка -  Создаем переменную с формой
//  5   строка -  Создаем переменную с данными из формы
//  7   строка -  Добавляем к данным ключ и значение (ключ:'action', значение:'create')
//  9   строка -  Создаем fetch-запрос, адрес для отправки берем из 'action'-а формы
//  10  строка -  Указываем метод POST или GET
//  11  строка -  Создаем тело запроса из раннее созданных данных (data)
//  13  строка -  Указываем скрипту что мы собираемся принимать ответ в формате JSON
 
//  15  строка -  Выводим результат в див. Почему 'data.resp'? Потому что JSON-формат
//                  предполагает использование массива в формате ключ:значение (ассоциативные массивы),
//                  'resp'- это ключ из ответа сервера `$response['resp']`
 
//  16  строка -  выводим дополнительный ключ из ответа от сервера

PHP
1
2
3
4
5
6
7
8
9
10
11
12
if(isset($_POST['action']) && $_POST['action'] == 'create') {   
    $response['resp'] = '<div>тут то что вы хотите отобразить на клиенте</div>';
    // при использовании формата JSON не получится вывести так: $response = '<div>тут то что вы хотите отобразить на клиенте</div>';
    // потому что это обычная строка. Раз уж вы используете JSON-формат то предполагается что и данные будут выводиться в этом формате
    // то есть- ключ:значение, так как я написал вам выше
    
    // можно добавить еще что-нибудь из пришедших данных пок их ключу, например:
    $response['meta_t'] = 'тут то что пришло из поля name="meta_t":'.$_POST['meta_t'];
    // и вывести их на клиенте: "document.querySelector('#box-body2').innerHTML += data.meta_t;"
}
 
echo json_encode($response);

Убрал из формы, на мой взгляд, лишние атрибуты, если что добавите...
required у полей, в данном случае, не нужен, потому как event.preventDefault(); отменяет и его то же. Что бы обязать к заполнению полей нужно либо в JS прописывать, либо на стороне сервера.

@wolfz · 23.01.2019, 23:47 **[ТС]**

Сообщение от Mr_Sergo

//* 7 * строка -* * Добавляем к данным ключ и значение (ключ:'action', значение:'create')

Спасибо! А как сделать, чтобы

Code
1
action

брался из формы, так как форм на странице много с разными

Code
1
action

и в зависимости от значений будет разный алгоритм обработчика?

@amr-now · 24.01.2019, 00:52

wolfz, action имеет дефолтное значение - url. И оно идет в заголовке запроса на сервер.
Я еще удивился, зачем Вы дублируете название.
Подумал, ну надо так надо.

Формы вообще-то по имени различаются штатно.

Добавлено через 10 минут

Сообщение от Mr_Sergo

required у полей, в данном случае, не нужен

Имхо, оставить надо.
Тут я продолбился, что не навесил обработчики JS на обязательность.

@Mr_Sergo · 24.01.2019, 01:32

Сообщение от wolfz

А как сделать, чтобы брался из формы

Нужно добавить в форму инпут с типом hidden, добавить ему name-ключ и value-значение:

HTML5
1
2
3
4
5
6
7
<form action="control.php" id="formModel">
    <input type="text" name="title">
    <input type="text" name="meta_t">
    <input type="hidden" name="action" value="create">  <!-- Эту строку добавьте в форму -->
    <button type="submit" onclick="submitForm(event)">Создать</button>
</form>
<div id="box-body2"></div>

А из js-файла нужно убрать строчку:

JavaScript
1
data.append('action','create');

и поменять строчку с адресом куда вы посылаете fetch-запрос на эту:

JavaScript
1
fetch(form.getAttribute('action'), {

В общем картина выглядит так:

HTML5
1
2
3
4
5
6
7
<form action="control.php" id="formModel">
    <input type="text" name="title">
    <input type="text" name="meta_t">
    <input type="hidden" name="action" value="create">  <!-- Эту строку добавьте в форму -->
    <button type="submit" onclick="submitForm(event)">Создать</button>
</form>
<div id="box-body2"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function submitForm(e){
    e.preventDefault();
 
    let form = document.querySelector('#formModel');
    let data = new FormData(form);
 
    fetch(form.getAttribute('action'), {
        method: 'POST',
        body: data
    })
    .then(response => response.json() )
    .then(data => {
        document.querySelector('#box-body2').innerHTML = data.resp;
    });
}

PHP
1
2
3
4
5
if(isset($_POST['action']) && $_POST['action'] == 'create') {   
    $response['resp'] = 'ключ `action` со значением `create` пришел';
}
 
echo json_encode($response);

Попробовать можете тут -> http://some-test.onlinewebshop... mments/01/

@amr-now · 24.01.2019, 10:34

wolfz, Mr_Sergo, ещё раз. Чем не устраивает - послать любой атрибут, например имя формы, в качестве

JavaScript
1
data.append("ИмяАтрибута", ЗначениеАтрибута);

И не пойму, нам нужно специально сломать request.url
или мы просто ошибаемся с выбором имени отправляемого параметра?

Добавлено через 2 минуты
Если специально ломаем request.url, то просто выставляем разный атрибут action у разных форм.
Скрипт уже менять не надо. Он был:

JavaScript
1
let url = form.action;

Добавлено через 49 минут
Вариант с несколькими формами.
Убраны ненужные в данном случае id элементов.
Есть JS-проверка required.
На сервер отправляется второе поле action, у которого значение - имя формы.
request.url продолжает браться из form.action

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <form action="control" name="create" enctype="multipart/form-data">
        <input type="text" name="title" required>
        <input type="text" name="meta_t" required>
        <button type="button" name="submit">Создать</button>
    </form>
    <form action="control" name="update" enctype="multipart/form-data">
        <input type="text" name="title" required>
        <input type="text" name="meta_t" required>
        <button type="button" name="submit">Создать</button>
    </form>
 
    <div class="box-body" id="box-body2"></div>
    <script>
        for (let form of document.forms) // Перебрать формы на странице
            form.submit.onclick = event => { submitForm(form, form.name); };
 
        async function submitForm(form, action) {
            if (!guard(form)) return; // Проверка полей любой формы на required
            form.submit.textContent= "Отправлено"; // Если поля валидные, можно изменить надпись на кнопке
 
            let url = form.action;
            let data = new FormData(form);
            data.append("action", action);
 
            let ajaxOptions = {
                method: 'POST',
                mode: 'cors',
                credentials: 'include',
                body: data
            };
            let response = await fetch(url, ajaxOptions); // Ответ само собой надо дождаться
            let text = await response.text(); // Текст ответа тоже надо дождаться
            document.getElementById("box-body2").innerHTML = text;
        }
 
        function guard(form) {
            for (let field of form.querySelectorAll("*")) {
                if (field.hasAttribute("required") && (!field.value)) {
                    alert("Требуется ввести значение поля " + field.name);
                    return false;
                }
            }
            return true;
        }
    </script>
</body>
</html>

@wolfz · 24.01.2019, 13:39 **[ТС]**

Спасибо огромное за помощь, еще раз убеждаюсь, что с такой неравнодушной помощью, обучение пойдет только в гору. Сам бы не разобрался)))

Сорри за наглость... пока разбирался созрел еще вопрос. У меня в одной форме создается новость через админку, где присутствуют обычные поля и загрузка на сервер изображения, который потом отображается как главное изображение поста. Но есть еще одна форма для редактирования, по сути таже форма, но только как сделать, что бы можно было не перегружая форму удалить к примеру загруженное ранее изображение и загрузить новое или оставить старое. Сейчас создаю новость обычным POST запросом к обработчику PHP. А редактировать хотелось бы с JS.

Форма которой создаю новость:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<form role="form" action="control" method="POST" enctype="multipart/form-data">
              <input type="hidden" name="added" value="<?=$_SESSION['USER_NAME']?>" >
               <!-- text input -->
                <div class="form-group">
                  <label>Заголовок новости:</label>
                  <input type="text" name="title" class="form-control" placeholder="Введите название новости" maxlength="150" title="Не менее 3 и не более 150 символов или цифр." required>
                </div>
                <div class="box-body pad">
                <textarea id="editor1" name="text" rows="10" cols="80"></textarea>
                </div>
                <div class="form-group">
                  <label>Заголовок новости (meta):</label>
                  <textarea type="text" name="meta_t" class="form-control" rows="2" placeholder="Введите заголовок новости" maxlength="256" title="Не менее 0 и не более 256 символов или цифр."></textarea>
                </div>
                <div class="form-group">
                  <label>Описание новости (meta):</label>
                  <textarea type="text" name="meta_d" class="form-control" rows="4" placeholder="Введите описание новости" maxlength="256" title="Не менее 0 и не более 256 символов или цифр."></textarea>
                </div>
                <div class="form-group">
                  <label>Ключевые слова новости (meta):</label>
                  <textarea type="text" name="meta_k" class="form-control" rows="4" placeholder="Введите ключевые слова" maxlength="256" title="Не менее 0 и не более 256 символов или цифр."></textarea>
                </div>
                <div class="form-group">
                  <label>Главное изображение новости (только формат .jpeg) или URL ссылка:</label>
                  <input type="file" name="imgurl" class="form-control" style="margin-bottom: 5px;"> 
                  <input type="text" name="imgurl2" class="form-control" placeholder="Введите URL ссылку на изображение" maxlength="160" title="Не менее 0 и не более 256 символов или цифр.">
                </div>
                <div class="box-footer">
                <button type="submit" name="submit" value="creat" class="btn btn-info">Создать</button>
                </div>
 
              </form>

А редактирую принимая значения фотки в текстовое поле

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<form role="form" action="control" method="POST">
              <input type="hidden" name="added" value="<?=$_SESSION['REGISTER_NAME']?>" >
              <input type="hidden" name="idnews" value="<?=$_SESSION['POST_ID']?>" >
                <!-- text input -->
                <div class="form-group">
                  <label>Заголовок новости:</label>
                  <input type="text" name="title" value="<?=$_SESSION['POST_TITLE']?>" class="form-control" placeholder="Введите название новости" maxlength="150" title="Не менее 3 и не более 150 символов или цифр." required>
                </div>
                <div class="box-body pad">
                <textarea type="text" id="editor1" name="text" rows="10" cols="80"><?=$_SESSION['POST_TEXT']?></textarea>
                </div>
                <div class="form-group">
                  <label>Заголовок новости (meta):</label>
                  <textarea type="text" name="meta_t" class="form-control" rows="2" placeholder="Введите заголовок новости" maxlength="256" title="Не менее 0 и не более 256 символов или цифр."><?=$_SESSION['POST_META_T']?></textarea>
                </div>
                <div class="form-group">
                  <label>Описание новости (meta):</label>
                  <textarea type="text" name="meta_d" class="form-control" rows="4" placeholder="Введите описание новости" maxlength="256" title="Не менее 0 и не более 256 символов или цифр."><?=$_SESSION['POST_META_D']?></textarea>
                </div>
                <div class="form-group">
                  <label>Ключевые слова новости (meta):</label>
                  <textarea type="text" name="meta_k" class="form-control" rows="4" placeholder="Введите ключевые слова" maxlength="256" title="Не менее 0 и не более 256 символов или цифр."><?=$_SESSION['POST_META_K']?></textarea>
                </div>
                <div class="form-group">
                  <label>Ссылка на главное изображение:</label>
                  <input type="text" name="imgurl" value="<?=$_SESSION['POST_IMGURL']?>" class="form-control" placeholder="Вставьте ссылку на изображение" maxlength="256" title="Не менее 0 и не более 256 символов или цифр."> 
                </div>
                <div class="box-footer">
                <button type="submit" name="submit" value="edit" class="btn btn-info">Редактировать</button>
                </div>
 
              </form>

@Mr_Sergo · 25.01.2019, 03:18

wolfz, Вот еще вариант с проверкой на заполненность полей:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<form action="control.php" name="create" enctype="multipart/form-data">
    <input type="text" name="title" required>
    <input type="text" name="meta_t" required>
    <button type="button" name="submit">Создать</button>
</form>
<form action="control.php" name="update" enctype="multipart/form-data">
    <input type="text" name="title" required>
    <input type="text" name="meta_t" required>
    <button type="button" name="submit">Создать</button>
</form>
<div class="box-body" id="box-body2"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let form = document.querySelectorAll('form'), body2 = document.querySelector('#box-body2'), errors = '';
 
[...form].forEach((e,i) => {
    e.submit.onclick = () => {
        errors = '', body2.innerHTML = '';
        [...e.querySelectorAll('*')].forEach(evt => {
            if(evt.hasAttribute('required') && !evt.value.trim()) errors += evt.name + ', ';
        });
        if(errors) alert('Форма: ' + e.name + '\nНе заполненные поля: ' + errors.slice(0,-2));
        else send(e);
    }
});
 
async function send(xxx){
    let response = await fetch(xxx.action,{
        method: 'POST',
        body: new FormData(xxx)
    });
    let res = await response.text();
    body2.innerHTML = res;
}

PHP
1
echo '<pre>', print_r($_POST), '</pre>';

amr-now, Кстати, есть стандартная функция checkValidity() для проверки на заполненность полей, там где есть required:

HTML5
1
2
3
4
<form>
    <input type="text" required>
    <button type="button" name="submit">Клик</button>
</form>

JavaScript
1
2
3
4
5
6
let form = document.querySelector('form');
 
form.submit.onclick = () => {
    if(!form.querySelectorAll('*')[0].checkValidity()) console.log('Поле не заполненно');
    else console.log('Все гуд');
}

но она даже не trim-ится

@wolfz · 27.01.2019, 18:33 **[ТС]**

А кто нибудь делал, чтобы ответ возвращался с сервера в сплывающем окне? Отправляю ответ клиенту, ответ приходит но окно не всплывает

Отправляю в клиент такой ответ:

JavaScript
1
2
$response['otvet'] = '<script type=\"text/javascript\">alert (\'Новость добавлена\')<\/script>';
        echo json_encode($response);

@Mr_Sergo · 28.01.2019, 00:13

HTML5
1
2
3
4
5
6
7
8
9
10
11
<form action="control.php" name="create" enctype="multipart/form-data">
    <input type="text" name="title" required value="ТАЙТЛ">
    <input type="text" name="meta_t" required value="МЕТА">
    <button type="button" name="submit">Создать</button>
</form>
<form action="control.php" name="update" enctype="multipart/form-data">
    <input type="text" name="title" required>
    <input type="text" name="meta_t" required>
    <button type="button" name="submit">Создать</button>
</form>
<div class="box-body" id="box-body2"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let form = document.querySelectorAll('form'), body2 = document.querySelector('#box-body2'), errors = '';
 
[...form].forEach((e,i) => {
    e.submit.onclick = () => {
        errors = '', body2.innerHTML = '';
        [...e.querySelectorAll('*')].forEach(evt => {
            if(evt.hasAttribute('required') && !evt.value.trim()) errors += evt.name + ', ';
        });
        if(errors) alert('Форма: ' + e.name + '\nНе заполненные поля: ' + errors.slice(0,-2));
        else send(e);
    }
});
 
async function send(xxx){
    let response = await fetch(xxx.action,{
        method: 'POST',
        body: new FormData(xxx)
    });
    let res = await response.json();
    eval(res.otvet);  // вот в этой строке происходит выполнение кода пришедшего в ответ от сервера
}

PHP
1
2
$response['otvet'] = 'alert("Новость добавлена")';
echo json_encode($response);

Насколько мне известно это единственный способ выполнить код JS полученный из ответа сервера, если честно, особо никогда не занимался этим вопросом, обычно такие моменты стараюсь прописать в js, то есть если сервер ответил "успешно" то выполнить alert("Новость добавлена")

Добавлено через 12 минут
Вот пример:
все то же самое кроме:

JavaScript
1
2
3
4
5
6
7
8
9
10
async function send(xxx){
    let response = await fetch(xxx.action,{
        method: 'POST',
        body: new FormData(xxx)
    });
    let res = await response.json();
 
    if(res.error) alert(res.error);
    if(res.ok) body2.innerHTML = res.ok;
}

PHP
1
2
3
4
$response['error'] = 'Ошибка';            // попробуйте удалить эту строку
$response['ok'] = 'Новость добавлена';  // или эту и посмотрите как отреагирует скрипт js
 
echo json_encode($response);

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

Не выводит ответ сервера в браузере

Решение