#javascript #php #jquery #html #ajax
#javascript #php #jquery #HTML #ajax
Вопрос:
У меня есть несколько изображений на странице, и при нажатии на одно из них отправляются данные POST, страница обновляется, а переменная Javascript увеличивается. Мой вопрос в том, как мне заставить переменную JS НЕ сбрасываться до значения, которое я инициировал, когда страница перезагружается? Ранее я также пытался сохранить переменную с помощью localstorage , но переменная по-прежнему сбрасывается — что логично, поскольку у меня есть инициализация в том же документе, но я не знаю, как я мог поступить иначе.
Я новичок в Javascript и хотел бы, чтобы все было как можно проще (и получить фиктивный ответ, если можно).
Ниже приведен мой код с соответствующим Javascript в начале тела (также есть какой-то нерелевантный php в отдельном документе):
<?php
$subtest_nr = "7";
$counter = 0;
require_once('php.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="styles.css">
<script src="jquery-3.1.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<script>
var counter = 0;
$(document).ready(function(){
$("img").click(function(){
counter = 4;
$("#test").text(counter); //for testing
});
$("#test").text(counter); //for testing
});
jQuery(function($) {
// Hide / suppress the submit button
$('input[type="submit"]').closest('div').hide();
// Bind to change event for all radio buttons
$('input[type="radio"]').on('change', function() {
// Submit the form ("this" refers to the radio button)
$(this).closest('form').submit();
});
});
</script>
<div class="main">
<div id="test"></div>
<?php $data = getData($subtest_nr); ?>
<form id="myform" method="post">
<div class="four_images">
<div class="flex-item">
<input type="radio" name="image" value="7.11" id="alt1" class="hidden">
<label for="alt1"><img src="images/<?php echo $data[$counter 0]; ?>"></label>
</div>
<div class="flex-item">
<input type="radio" name="image" value="7.12" id="alt2" class="hidden">
<label for="alt2"><img src="images/<?php echo $data[$counter 1]; ?>"></label>
</div>
<div class="flex-item">
<input type="radio" name="image" value="7.13" id="alt3" class="hidden">
<label for="alt3"><img src="images/<?php echo $data[$counter 2]; ?>"></label>
</div>
<div class="flex-item">
<input type="radio" name="image" value="7.14" id="alt4" class="hidden">
<label for="alt4"><img src="images/<?php echo $data[$counter 3]; ?>"></label>
</div>
<div>
<input type="submit" name="save" value="Save Image Selection">
</div>
</div>
</form>
</div>
</body>
</html>
Я могу добавить, что я хочу сохранить обновление страницы, потому что позже я хочу передать увеличенную переменную на php без необходимости публиковать ее с помощью Ajax или чего-то подобного. (Надеюсь, это упростит мне задачу как новичку.)
Комментарии:
1. Вам нужно будет использовать localStorage для хранения значения, и вы прочитаете его при инициализации страницы или, что еще лучше, попросите PHP сохранить значение и записать его на страницу
2. Вы на правильном пути
localStorage, все, что вам нужно сделать, это проверить, существует ли оно перед инициализацией его начального значения, чтобы оно не сбрасывалось. Вы также можете использовать сеанс в PHP.3. @SpencerWieczorek Ах, конечно! Спасибо! Попробую это.
4. @epascarella Как мне заставить PHP удерживать ее? Дело в том, что я действительно хочу, чтобы счетчик был переменной PHP позже, так что, возможно, это было бы хорошим решением для меня.
Ответ №1:
Вот довольно простой пример того, как вы могли бы использовать localStorage и настроить простые средства получения / настройки сеанса для обработки данных при обновлении страницы.
function setSessionItem(name, value) {
var mySession;
try {
mySession = JSON.parse(localStorage.getItem('mySession'));
} catch (e) {
console.log(e);
mySession = {};
}
mySession[name] = value;
mySession = JSON.stringify(mySession);
localStorage.setItem('mySession', mySession);
}
function getSessionItem(name) {
var mySession = localStroage.getItem('mySession');
if (mySession) {
try {
mySession = JSON.stringify(mySession);
return mySession[name];
} catch (e) {
console.log(e);
}
}
}
function restoreSession(data) {
for (var x in data) {
//use saved data to set values as needed
console.log(x, data[x]);
}
}
window.addEventListener('load', function(e) {
var mySession = localStorage.getItem('mySession');
if (mySession) {
try {
mySession = JSON.parse(localStorage.getItem('mySession'));
} catch (e) {
console.log(e);
mySession = {};
}
restoreSession(mySession);
} else {
localStorage.setItem('mySession', '{}');
}
setSessionItem('foo', Date.now()); //should change each time
if (!mySession.bar) {
setSessionItem('bar', Date.now()); //should not change on refresh
}
}, false);
Комментарии:
1. Не могли бы вы прокомментировать это, а также описать, как это должно вызываться в моем скрипте?
2. Каждый раз, когда вы устанавливаете счетчик, вы также должны сохранять значение value в локальном хранилище, используя метод setSessionItem . При обновлении страницы должен быть вызван метод restoreSession. Внутри этого метода вы можете настроить логику определения для использования значений, сохраненных до обновления, как вам нравится. Вы также можете использовать getSessionItem для получения одного элемента / значения из сохраненного вами объекта сеанса.
Ответ №2:
Вы можете сохранить переменную до выполнения запроса post в localStorage и прочитать переменную counter из localStorage при загрузке страницы. Поддержка браузера localStorage
Или вы можете отправить переменную counter в качестве параметра URL и установить счетчик через PHP.