Как использовать 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('Спасибо, мы скоро свяжемся с Вами.')
}}
);
};