Как я могу изменить содержание DIV с помощью AJAX

Вопрос: Это код для index.php, с тремя div: Patienten Patienten anlegen Patienten bearbeiten Patienten loeschen Termine Termine anlegen Termine bearbeiten Termine löschen И menue.js:

Вопрос:

Это код для index.php, с тремя div:

<body> <div class=»div_header» id=»div_header»> </div> <div class=»div_left» id=»div_left»> <ul> <li>Patienten <ul> <li><a href=»#» id=»patienten_anlegen»>Patienten anlegen</a></li> <li><a href=»#» id=»patienten_bearbeiten»>Patienten bearbeiten</a></li> <li><a href=»#» id=»patienten_loeschen»>Patienten loeschen</a></li> </ul> </li> <li>Termine <ul> <li>Termine anlegen</li> <li>Termine bearbeiten</li> <li>Termine löschen</li> </ul> </ul> </div> <div class=»div_main» id=»div_main»> </div> <div class=»div_right» id=»div_right»> </div> </body>

И menue.js:

$(document).ready(function(){ $(«#patienten_anlegen»).click(function(){ $(«#div_main»).load(«templates/patienten/patienten_anlegen.php»); }); $(«#patienten_bearbeiten»).click(function(){ $(«#div_main»).load(«templates/patienten/patienten_bearbeiten.php»); }); $(«#patienten_loeschen»).click(function(){ $(«#div_main»).load(«templates/patienten/patienten_loeschen.php»); }); });

Если я нажму на “Patienten anlegen”, я хочу изменить содержимое “div_main”. Это работает, но я хочу, если я нажму F5 (перезагрузка), чтобы находиться на одном сайте, а не на index.php, и я не хочу видеть “#” в адресной строке браузера (например: локальный /patientenverwaltung/#)

Извините за мой английский, надеюсь, вы понимаете, чего я хочу;)

Лучший ответ:

Во-первых, о # в URL-адресе: вы должны удалить href=»#» из тега. Но это также удалит курсор ссылки, когда вы наводите на него курсор. Чтобы исправить это, добавьте класс к каждому элементу (например, ссылку) и добавьте некоторый css, чтобы его исправить.

<li><a class=»link» id=»patienten_anlegen»>Patienten anlegen</a></li> <li><a class=»link» id=»patienten_bearbeiten»>Patienten bearbeiten</a></li> <li><a class=»link» id=»patienten_loeschen»>Patienten loeschen</a></li>

CSS:

.link { cursor: pointer; }

Затем, чтобы сохранить исходное состояние, у вас есть два варианта: сохранить его в локальном хранилище (только для HTML5) или добавить строку запроса, когда вы нажимаете на каждую ссылку, чтобы ваш URL имел “предыдущий вид = anlegen” или аналогичный.

Поскольку вы хотели избавиться от # в URL-адресе, я пройду через локальный метод хранения.

$(‘.link’).on(‘click’, function (e) { sessionStorage.setItem(«previousView», this.id); });

а затем перезагрузить представление

if (sessionStorage.getItem(«previousView»)) { $(«div-main»).load(«templates/patienten/»+sessionStorage.getItem(«previousView»)+».php»); } Ответ №1

вы можете использовать хешированную навигацию с помощью ajax, поэтому в следующий раз, когда вы нажмете кнопки reload/back/next, навигация будет работать, как ожидалось. свойство, которое вам нужно найти: location.hash

предположим, что вы изменили свой html следующим образом:

<li><a href=»#anlegen» id=»patienten_anlegen»>Patienten anlegen</a></li> <li><a href=»#bearbeiten» id=»patienten_bearbeiten»>Patienten bearbeiten</a></li> <li><a href=»#loeshen» id=»patienten_loeschen»>Patienten loeschen</a></li>

и в javascript:

$(document).ready(function(){ if(location.hash.substring(1)) { var initialPageToLoad= «patienten_» + location.hash.substring(1); $(«#div_main»).load(«templates/patienten/» + initialPageToLoad); } });

это обеспечит загрузку последнего содержимого, как только документ будет готов.

Ответ №2

Я думаю, вы хотите сохранить состояние своего сайта. Если это так, то вы можете это сделать с помощью файлов cookie.

т.е. при щелчке каждого div измените значение cookie и на нагрузке проверьте его и запустите щелчок соответствующего div.

Ответ №3

Нажатие f5 перезагрузит страницу, и вы сбросите все загруженные страницы во время использования приложения.

Хэш в URL- <a href=»#»></a> состоит в том, что у вас <a href=»#»></a>

Чтобы предотвратить это, в вашем обработчике кликов добавьте –

$(«#patienten_loeschen»).click(function(e){ e.preventDefault(); …

Поскольку ссылка является ссылкой javascript, – и если вас беспокоят возможности поиска и поиска индекса, используйте другой элемент вместо тега привязки

<div id=»patienten_loeschen»> …

и с помощью css вы можете сделать это “чувствовать” как ссылку.

#patienten_loeschen { cursor:pointer; text-decoration:underline; } Ответ №4

Если вы просто хотите избавиться от “#”, вы можете указать в HTML:

<li><a href=»javascript:void(0);» id=»patienten_anlegen»>Patienten anlegen</a></li>

Ответ №5

Если вы просите сохранить данные при перезагрузке.

Если вы так хотите, вы должны запрашивать данные из своей базы данных при загрузке своей страницы. Ex.

<html> <body> <?php you must query here, the data you want to display, if (no data yet) then do some codes here else display the data end if ?> Then you can perform the ajax here. </body> </html> Ответ №6

Вы хотите сделать навигацию ajax на своем веб-сайте;

для этого вы должны изменить содержимое div а затем часть URL-адреса вашего сайта. для того, что многие схемы навигации ajax доступны одна или популярная, ориентированная на хэш- навигацию. Взгляни на,

СПРАВКА

Оцените статью
Добавить комментарий