Размещено: 2024-01-09 17:20:19
Теги: html, css, js
СОХРАНЕНИЕ ДАННЫХ AJAX'ОМ
Данные отправляются на файл saver.php в виде GET запроса, если данные успешно сохранены он должен вывести {"success":1}
. В процессе запроса возможны 2 типа ошибок - когда попасть до файла не удалось, из-за обрыва соединения или еще чего-либо, и второй тип ошибок (не обязательно ошибок) это ответ в случае если сохранить данные файл не смог или не захотел.
<!DOCTYPE html> <html> <head> </head> <body> <div id="ajax_alert">Сохранено!</div> <input id="p1" type="text"> <input id="p2" type="text"> <button onclick="save()">go</button> <script> function ajax_alert(text,color) { var ajax_alert=document.getElementById('ajax_alert'); ajax_alert.style.display='block'; ajax_alert.innerHTML=text; ajax_alert.style.backgroundColor=color; setTimeout(function(){ajax_alert.style.display='none';},2000); } async function save() { let p1=document.getElementById('p1').value; let p2=document.getElementById('p1').value; let params=new URLSearchParams({p1: p1, p2: p2}); let ajax=await fetch('/saver.php?'+params.toString()); if(ajax.ok) { let res=await ajax.json(); if(res['success']==1) { ajax_alert('Успешно сохранено!','lightgreen'); } else { ajax_alert('Не удалось сохранить!','lightpink'); } } else { ajax_alert('Ошибка доступа к файлу!','lightpink'); } } </script> <style> body { margin: 0px; } #ajax_alert { font-weight: bold; padding: 5px 20px; text-align: center; display: none; right: 0; left: 0; width: max-content; margin: auto; position: fixed; } </style> </body> </html>
На эту страницу чаще всего попадают по запросам: аякс, сохранялка, передача данных аяксом, статус аякса, статус сохранения, сохранение