Размещено: 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>

На эту страницу чаще всего попадают по запросам: аякс, сохранялка, передача данных аяксом, статус аякса, статус сохранения, сохранение