Вернуться на предыдущую страницу

Как использовать JS fetch без jQuery, но с сервером на PHP – ответ сервера + отсылка данных на сервер...

/*проверим, поддерживает ли browser – fetch?*/
if (window.fetch) {/*если да*/
 function formEncode(obj) {/*эта функция позволит преобразовать JS Object в валидные данные для POST-запроса*/
 var str = [];
 for(let p in obj)
 str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
 return str.join("&");
 };

 fetch("/", {
 method: "POST",
 headers: { "Content-type": "application/x-www-form-urlencoded"},
 mode: "same-origin",
 credentials: "same-origin",
 body: formEncode({html:document.documentElement.outerHTML,set:"setIndex",location_:location.href})/*мне необходимо было передавать содержимок HTML-документа на сервер, чтобы сохранить страницу HTML полностью, после формирования DOM*/
 });
};

Далее: сторона сервера.

<?php
/*Здесь я уже получаю привычные данные POST и могу с ними взаимодействовать... */
$file=getenv('DOCUMENT_ROOT').'/sys/index_mob.html';
$d=@file($file);
IF(!is_file($file)){file_put_contents($file,$_POST['html']);}
// Если файл не обновлялся 3600 секунд (1 час) или файл пуст,
// то обновляем его
//3600*24 (сутки)
if (filemtime($file)<(microtime(true)-(3600*24))) {
    file_put_contents($file,$_POST['html']);
}
exit;

Затем можно сформировать ответ сервера:

<?php
echo json_encode(['data'=>'string','data2'=>'string2']);

И его распарсить:

.then(resp=>{
    resp.json();
}).then(data=>{
    console.log(data)
})

Весь код JS выглядит так:

fetch("/", {
    method: "POST",
    headers: { "Content-type": "application/x-www-form-urlencoded"},
    mode: "same-origin",
    credentials: "same-origin",
    body: formEncode({html:document.documentElement.outerHTML,set:"setIndex",location_:location.href})/*мне необходимо было передавать содержимок HTML-документа на сервер, чтобы сохранить страницу HTML полностью, после формирования DOM*/
}).then(resp=>{/*здесь мы получаем ответ и взаимодействуем с ним*/
    resp.json();/*преобразовываем ответ из JSON*/
}).then(data=>{
    console.log(data)/*выводим данные*/
});

А также ответ сервера (PHP):

echo json_encode(['data'=>'string','data2'=>'string2']);

Выглядеть это будет так:

{"data":"string","data2":"string2"}

... и если это распарсить, как указано в комментариях к JS выше, то получится объект. К нему можно будет обращаться:

...
}).then(resp=>{/*здесь мы получаем ответ и взаимодействуем с ним*/
    resp.json();/*преобразовываем ответ из JSON*/
}).then(data=>{
    console.log(data)/*выводим данные – {"data":"string","data2":"string2"}*/
    console.log(data.data);/*string*/
    console.log(data.data2);/*string2*/
});

Еще пример распарсивания результата, как объекта:

fetch("/", {
  method: "POST",
  headers: { "Content-type": "application/x-www-form-urlencoded"},
  mode: "same-origin",
  credentials: "same-origin",
  body: formEncode({name:$('.FTN').val(),phone:$('.FTPh').val(),email:$('.FTPem').val(),text:$('.txtArea').val(),set:"feedback",location_:location.href})/*мне необходимо было передавать содержимок HTML-документа на сервер, чтобы сохранить страницу HTML полностью, после формирования DOM*/
})
.then(r =>  r.json().then(data => ({status: r.status, body: data})))
.then(
  obj => {if(obj.status==200){
      if(obj.body.errs!='')$('.error').text('Возможно, Вы что-то неверно заполнили. Проверьте все поля.')
      if(obj.body.good==1)$('.error').text('Спасибо, мы скоро свяжемся с Вами.')
      }}
  );
};