javascript — обновить страницу в фоновом режиме или SQL-запрос, используя ajax при нажатии кнопки

Question

javascript — обновить страницу в фоновом режиме или SQL-запрос, используя ajax при нажатии кнопки

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

<script type="text/javascript">
function reset()
{
document.getElementById("1").innerHTML='<?php echo $data["Firstname"] ?>';
document.getElementById("2").innerHTML='<?php echo $data["Middlename"] ?>';
document.getElementById("3").innerHTML='<?php echo $data["Lastname"] ?>';
document.getElementById("4").innerHTML='<?php echo $data["Address"] ?>';
document.getElementById("5").innerHTML='<?php echo $data["PhoneNumber"] ?>';
document.getElementById("6").innerHTML='<?php echo $data["Birthdate"] ?>';
document.getElementById("7").innerHTML='<?php echo $data["Gender"] ?>';
}
</script>

Или, если я нажму кнопку «Сохранить», он сохранит изменения, используя ajax, он успешно обновит мою информацию в базе данных без перезагрузки страницы.

$(document).ready(function(){
//check if btnUpdate is clicked
$("#save").click(function()
{
var fname = $("#11").val();
var mname = $("#22").val();
var lname = $("#33").val();
var add = $("#44").val();
var phonenumber = $("#55").val();
var bdate = $("#66").val();
var gen = $("#77").val();$.ajax(
{
url:"AdminBasicInfoUpdate.php",
type:"POST",
data:{"f":fname,"m":mname,"l":lname,"a":add, "p":phonenumber,"b":bdate,"g":gen },
success:function(e)
{console.log(e)

if(e == 1)
{
alert("No Changes Have Been Detected!");
}
else
{
$("#fullname").html(fname+ " " + lname);
alert("Personal Information Has Been Updated Success!");
$("#note").slideUp(500);
}
}
}
);
});

});

Проблема в том, что после сохранения изменений, когда я снова нажимаю кнопку «Отмена», отображается информация перед обновлением, а не новая обновленная информация. Не могу понять, как это исправить. Я думаю, что я должен обновить страницу в фоновом режиме или обновить запрос SQL после нажатия кнопки Сохранить, но я не знаю, как. Мне нужна помощь. Заранее спасибо.

<php session_start();

include("connection.php");
$username=$_SESSION['Username'];
$sql = "SELECT * FROM table WHERE Username='$username'";
$res=mysqli_query($con,$sql);
$data=mysqli_fetch_assoc($res); ?>

1

ajax javascript jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы можете использовать подход, который вы используете сейчас, но с одним небольшим изменением. Вместо того, чтобы иметь reset() Функция устанавливает элементы страницы на выдаваемые значения, она устанавливает их на переменные. Что-то вроде этого:

var currentFirstName = '<?php echo $data["Firstname"] ?>';
var currentMiddleName = '<?php echo $data["Middlename"] ?>';
// etc.

function reset()
{
document.getElementById("1").innerHTML = currentFirstName;
document.getElementById("2").innerHTML = currentMiddleName;
// etc.
}

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

Затем, следуя операции AJAX, после успешного обновления данных на стороне сервера вы можете обновить эти переменные. Что-то вроде этого:

success: function(e) {
// the rest of the code you have, and then...

currentFirstName = fname;
currentMiddleName = mname;
// etc.
}

(Возможно, вы можете заключить это в другую функцию, выполнить рефакторинг и очистить, как считаете нужным.)

После того, как эти переменные, содержащие состояние верхнего уровня (current*) обновляются каждый раз, когда вы звоните reset() он установит элементы страницы в текущее состояние этих переменных. Таким образом, в основном, когда страница загружается, она устанавливает эти переменные в состояние записи в то время. Поскольку страница используется, она обновляет эти переменные для сохранения текущего состояния с целью сброса формы.

Конечно, существуют и другие подходы. Вы можете просто перезагрузить страницу (может быть, не идеально), или, возможно, вы могли бы повторно получить запись с сервера в вашем reset() функция вместо использования значений, которые были отправлены на страницу, и так далее. Есть много способов сделать это.

1