Отображать данные страницы на той же странице, не пересылая их на другую страницу - PullRequest
Новая
       4

Отображать данные страницы на той же странице, не пересылая их на другую страницу

1 голос
/ 12 июня 2011

На моей веб-странице (например, ссылка 1: http://localhost:8086/MyStrutsApp/login.do) у меня есть несколько ссылок. Когда пользователь нажимает на одну из ссылок, он попадает на другую страницу (например, ссылка2: http://localhost:8086/MyStrutsApp/AddBook.jsp), чтобы заполнить HTML-форма.

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

Понятия не имею, как этого добиться.

Ответы [ 3 ]

2 голосов
/ 12 июня 2011

AJAX способ добиться этого заключается в следующем:

  • у вас есть DIV на исходной странице, которая будет заменена (т. Е. Либо имеет контент, который имеет смысл только в исходном контексте, либо полностьюпусто)
  • ваш сервлет Link2 создает только содержимое указанного выше DIV (а не содержимое этой страницы)
  • вы используете крошечный кусочек Javascript для выполнения вызова AJAX и заполнения DIVс ответом.

Если вы хотите использовать Dojo, HTML-страница будет выглядеть следующим образом: 

<!-- main content -->
<div id="leftpanel">
    <h3>This content will be replaced</h3>
    You can <a href="#" onClick="updateFromURL('/MyStrutsApp/AddBook.jsp)">add a book</a>
</div>

Код Javascript будет выглядеть следующим образом: 

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
<script type="text/javascript">
function display_wait(s) {
  var mainPanel=dojo.byId("leftpanel");
  mainPanel.innerHTML='<div class="waitingmsg">'+s+'</div>';
}

function updateFromURL(url) {
    display_wait("loading content");
    dojo.xhrGet({url:url,
                load:function(result) {
                dojo.byId('leftpanel').innerHTML=result;
            }});
}
</script>

(Как упоминал Рафа, вы можете использовать ту же технику для отображения новой детали в диалоговом окне)

1 голос
/ 12 июня 2011

Вы всегда можете использовать jQuery для представления диалога ... http://jqueryui.com/demos/dialog/

Получить страницу с помощью AJAX и представить ее в диалоговом окне.

0 голосов
/ 12 июня 2011

Чтобы отобразить одну страницу на другой, используйте iframe. См. документы iframe .

Чтобы сделать ссылку на внешней странице, загрузите ее целевую страницу в iframe, задайте атрибут iframe a name и присвойте ссылке соответствующий атрибут target.

...