Недавно я создал веб-сайт, который позволяет пользователям загружать изображения, а затем позволяет этому пользователю и другим пользователям сайта оценивать изображения с 1 по 10. Все работает правильно. Когда пользователь оценивает изображение, это сохраняется, а затем генерируется и предоставляется пользователю случайное поле. Это работает, добавив новый идентификатор окна (случайно сгенерированный) в строку запроса. Это позволяет пользователю вернуться к изображениям, которые они только что видели.
Моя проблема связана с обновлением страницы. В настоящее время мой код обрабатывает рейтинг и сохраняет его в базе данных, затем перенаправляет пользователя на ту же страницу, где у меня есть код для поиска идентификатора случайного изображения из базы данных, а затем с помощью этого идентификатора перенаправляет их снова на ту же страницу с идентификатором в querystring. Это прекрасно работает, но я хотел бы сделать так, чтобы обновлялись только информация об изображении и изображениях (рейтинг имени изображения и т. Д.), А остальная часть HTML (заголовок, навигация, боковые панели, нижний колонтитул и т. Д.) не является.
Насколько я понимаю, вы можете загрузить часть веб-сайта с помощью JQuery / Javascrip / AJAX? Однако это не позволит пользователю перенаправлять обратно на ранее просматриваемое изображение?
Если вам нужна дополнительная информация, пожалуйста, спросите.
РЕДАКТИРОВАТЬ
Я взял некоторую информацию на борту и изменил свой код, чтобы использовать хэш-значения, которые мой код ниже:
HTML
<img id="design" alt="" width="300" height="300" /> <input type="button" id="GetImage" value="Get Image" /> Jquery
$(document).ready(function(){ $("#GetImage").click(function() { $.ajax({ //Make the Ajax Request type: "POST", url: "testimagelook.php", //file name success: function(server_response){ var id = server_response; document.location.hash = id; $('#design').attr('src','img/boxes/'+id+'.png'); } }); }); });
Файл php testimagelook.php подключается к базе данных и возвращает случайный идентификатор одного из моих изображений. Этот код отлично подходит для показа изображения и сохранения идентификатора изображения в хэше URL-адреса, что позволяет мне сохранять историю пользователей изображений. Однако я не уверен, как получить предыдущее значение хэширования и загрузить изображение с правильным идентификатором, когда пользователь нажимает кнопку «Назад». Есть идеи?
Да, вы можете достичь этого, используя метод JQuery AJAX
Для вашей простоты используйте это
$.post('pageURL.php', {data1: value1}, function(result) { // Update the portion of the page you wish to });
ОБНОВЛЕНО
$.ajax({ type: "POST", url: "PageName.aspx/MethodName", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { // Now receive the data (information) in the form of JSON // In this JSON you can pass the imageID or anything to proceed your logic // and update the portion of the page you wish to } });
Существует несколько способов сделать то, что вам нравится.
Более новые (html5 поддерживающие) браузеры предоставляют объекту History объект, который можно использовать для добавления и удаления местоположений истории (back-forward button).
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
Но это все еще нова, и вы не можете заставить своих пользователей использовать более новые браузеры.
Способ, который «всегда» работает, заключается в том, чтобы добавить #yourId привязки к члену href объекта document.location который идентифицирует ваше изображение. Затем это будет автоматически сохранено в истории браузеров. Чтобы затем использовать эту информацию, вам нужно будет убедиться, что вы поймаете изменение в объекте document.location и обновите представление изображения соответствующими данными с помощью запроса Ajax.
Я сам кодирую нечто подобное, вы можете попробовать что-то вроде этого:
newimage.js:
function newImage(id,rate) { $('.wrapper').empty(); $.ajax({ url:'dbfunction.php', type:'POST', data: { 'imageid': i, 'rating':rate } }).success(function(){ // Using jquery append new information inside wrapper }); }
dbfunction.php:
<?php mysql_query("UPDATE table SET rating='".$_POST['rating']."' WHERE id='".$_POST['id']."'"); // Get new id from db echo json_encode($new_id); ?>
Это очень маленький пример, чтобы вы начали. Любые вопросы просто спрашивают. Более подробную информацию можно найти здесь и здесь .
Чтобы немного уточнить, я использую аналогичный код на своей веб-странице . Вы можете получить всю информацию без всякого обновления страницы. Вся история страниц сохраняется в глобальном массиве. Имейте в виду, что веб-страница находится в процессе создания и не все функциональны!