JSP i servlety z wykorzystaniem AJAX

Rejestracja:prawie 17 lat
Ostatnio:ponad 11 lat

Witam,
napisałem prostą stronkę, w której przy pomocy comboboxa wybierana jest opcja i następnie po naciśnięciu przycisku wywoływany jest servlet, który wyciąga dane z bazy danych, a następnie przedstawia wynik na nowej stornie jsp. Teraz chciałbym to wszystko zrobić przy pomocy AJAXa, czyli aby wynik był wyświetlany na tej samej stronie. No i niestety nie wychodzi mi połączenie tego wszystkiego.

Skrypt AJAX:

Kopiuj

<script type="text/javascript">
function createXMLHttpRequest() {
	if (window.XMLHttpRequest)
	  // code for IE7+, Firefox, Chrome, Opera, Safari
	  return new XMLHttpRequest();
	else if (window.ActiveXObject)
	  // code for IE6, IE5
	  return new ActiveXObject("Microsoft.XMLHTTP");
	else
	  alert("Your browser does not support XMLHTTP!");

	return null;
}

var xmlhttp = new createXMLHttpRequest();

function handler() {
	if (xmlhttp.readyState==4 && xmlhttp.status==200)
		document.getElementById("WYNIK").innerHTML=xmlhttp.responseText;
}

function ajaxExecute() {
	xmlhttp.onreadystatechange = handler;
	xmlhttp.open("POST","Servlet.do",true);
	xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xmlhttp.send("form="+opcja);
}
</script>

HTML:

Kopiuj

<body>
<div id="szablon">
	<div id="FORMULARZ">
		<form name="form" method="post" action="Servlet.do">
			<select name="opcja">
				<option>opcja1</option>
				<option>opcja2</option>
				<option>opcja3</option>
				<option>opcja4</option>	
			</select>
			<br/><br/>
			<input type="button" name="przycisk1" value="przycisk1" onclick="script:ajaxExecute()"/>
			<input type="button" name="przycisk2" value="przycisk2" onclick="script:ajaxExecute()"/>
		</form>
	</div>
	<div id="WYNIK">wynik zapytania</div>
</div>
</body>

Przy takim kodzie po naciśnięciu przycisków nic się nie dzieje. Gdy zmienię rodzaj przycisków z "button" na "submit" to wykonuje się wszystko z pominięciem AJAXa. Proszę o jakiekolwiek wskazówki. W servlecie nadal mam podaną do wyświetlania stronę jsp. Może tutaj powinno być podane coś innego?

edytowany 1x, ostatnio: Brylu 2012-12-29 21:37

chodnik

2012-12-30 11:30

chodnik2012-12-30 11:30

Rejestracja:prawie 19 lat
Ostatnio:prawie 2 lata
Postów:656

Pierwsze co bym zmienił to onclick="ajaxExecute()"
Druga rzecz, to w metodzie doPost zrób jakieś logowanie na konsolę, wypisz otrzymane parametry.
Trzecia rzecz: zainstaluj firebug, będziesz widział jakie zapytania generuje twoja strona i czy w ogóle to robi.

Brylu

2012-12-31 00:00

Brylu2012-12-31 00:00

Rejestracja:prawie 17 lat
Ostatnio:ponad 11 lat

Dzięki chodnik za wskazówki. Firebug okazał się być bardzo pomocny. Problem polegał na przekazywaniu parametrów do metody doPost oraz na deklaracji zmiennych w:

Kopiuj

xmlhttp.send();

Z przekazaniem parametru z formularza sobie poradziłem, niestety nie wiem w jaki sposób wyłapać, czy przycisk1 ma wartość null (czyli, że wciśnięto przycisk2). Obecnie wygląda to tak:function ajaxExecute() { var opcja = document.getElementById("kolumna"); var przycisk1 = document.getElementById("przycisk1"); xmlhttp.onreadystatechange = handler; xmlhttp.open("POST","Servlet.do",true); xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send("opcja="+opcja.value+"&przycisk1="+przycisk1.value); }

Kopiuj

Niestety teraz za każdym razem przekazywana jest wartość "przycisk1" nawet podczas wciśnięcia przycisku2, gdzie powinna być wysłana wartość null. Oczywiście wiem, że deklaracja jest tutaj błędna, jednak nie mam pomysłu jak to rozwiązać. Jedyne co przychodzi mi do głowy to podpięcie osobnych funkcji pod każdy z przycisków i przekazanie w nich odpowiedniego parametru przycisku.

edytowany 2x, ostatnio: Brylu 2012-12-31 00:25

Visher

2012-12-31 00:35

Visher2012-12-31 00:35

Rejestracja:ponad 13 lat
Ostatnio:ponad 11 lat
Postów:212

Dla własnego i użytkownika dobra lepiej zaprzęgnąć jQuery do AJAXa, gdzie wywołanie żądania sprowadza się do (przykład):

Kopiuj

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

jQuery rozwiązuje też problemy kompatybilności wywołań AJAXa pod różnymi przeglądarkami.

W Twoim przypadku po dodaniu jQuery:

Kopiuj

function ajaxExecute() {
    $.ajax({
        url: 'Servlet.do',
        type: 'POST',
        data: 'opcja=' + $("#kolumna").val() + '&przycisk1=' + $("#przycisk1").val(),
        
        success: function(data) {
            // data to zwrócona odpowiedź serwera
        }
    });
}

edytowany 3x, ostatnio: Visher 2012-12-31 00:40

Brylu

2012-12-31 09:52

Brylu2012-12-31 09:52

Rejestracja:prawie 17 lat
Ostatnio:ponad 11 lat

Po zastosowaniu jQuery całość wykonuje się 'chyba' poprawnie, ale nie mam wyniku w div'ie, jedynie w konsoli firebuga się to ukazuje. I nadal nie został rozwiązany problem z odczytaniem przycisku.

edytowany 1x, ostatnio: Brylu 2012-12-31 09:54

Visher

2012-12-31 12:15

Visher2012-12-31 12:15

Rejestracja:ponad 13 lat
Ostatnio:ponad 11 lat
Postów:212

Dodałeś includowanie jQuery w nagłówku dokumentu, tak?

Co do obsługi przycisków to powinno się to robić inaczej. Jak już ktoś wcześniej wspomniał, na pewno nie przez onSubmit w HTMLu. Natomiast taki sposób jest dobry:

Dopisujesz formularzowi id="ajaxFormularz"
Przyciski robisz tak:

Kopiuj

<input type="submit" name="przycisk1" value="przycisk1"/>

Kopiuj

$("#ajaxFormularz").submit(function()
{
  // tutaj ten $.ajax..

  return false;
});

Najważniejszym elementem jest tutaj return false - spowoduje, że event (czyli wysłanie formularza) nie będzie dalej przekazywany (do wysłania)
4) W ajaxowym success umieszczasz:

Kopiuj

$("#WYNIK").text(data);

Taka rozsypanka wyszła, ale poradzisz sobie.

edytowany 1x, ostatnio: Visher 2012-12-31 12:15

Brylu

2012-12-31 12:45

Brylu2012-12-31 12:45

Rejestracja:prawie 17 lat
Ostatnio:ponad 11 lat

jQuery dodałem do nagłówka. Gdy zrobiłem to tak jak napisałeś, to teraz wyskakuje błąd, gdyż do servletu przekazywana jest wartość null z comboboxa. Co do przycisków to w servlecie mam zrobione, że jeżeli przycisk1==null (czyli wciśnięty przycisk2), to wykonuje się jedno, w przeciwnym wypadku (wciśnięty przycisk1) wykonuje się coś innego. Ten sposób podany przez Ciebie obsługi przycisków będzie współgrał z moim warunkiem w servlecie?

Visher

2012-12-31 15:01

Visher2012-12-31 15:01

Rejestracja:ponad 13 lat
Ostatnio:ponad 11 lat
Postów:212

Moja wina, trochę Twojego kodu nie doczytałem, w zasadzie to nawet nie wiem skąd bierzesz ten element od ID = "kolumna". Otóż combo boxowi najlepiej nadać ID żeby łatwo było odczytać jego wartość. Przyciski można też zorganizować w inny sposób; użyć dwóch z tym samym name lecz inną wartością:

Kopiuj

<select id="opcjaSelect" name="opcja">
	<option>opcja1</option>
	<option>opcja2</option>
	<option>opcja3</option>
	<option>opcja4</option>        
</select>

<br/><br/>
<input type="submit" name="przycisk" value="przycisk1" />
<input type="submit" name="przycisk" value="przycisk2" />
</html>

Kolejny problem pojawia się, gdy chcesz mieć przekazaną zmienną "przycisk" z dwoma innymi wartościami: przycisk1 lub przycisk2. W sumie to najprościej zrobić to tak:

Kopiuj

$("#ajaxFormularz> input[type=submit]").click(function() {   // dla każdego inputu o typie submit w #ajaxFormularz
    var wartoscPrzycisku = $(this).val();
    
    $.ajax({
        url: 'Servlet.do',
        type: 'POST',
        data: 'opcja=' + $("#opcjaSelect").val() + '&przycisk=' + wartoscPrzycisku,
 
        success: function(data) {
            $("#WYNIK").text(data);
        }
    });
    
    return false;
});

Wtedy w serwlecie odbierasz atrybuty opcja oraz przycisk z odpowiednimi wartościami.

edytowany 2x, ostatnio: Visher 2012-12-31 15:03

Brylu

2012-12-31 15:38

Brylu2012-12-31 15:38

Rejestracja:prawie 17 lat
Ostatnio:ponad 11 lat

Dzięki za pomoc. Jednak teraz wynik wyświetla mi się na nowej stronie, jakby z pominiętym AJAXem. I jeszcze odczytanie wartości przycisku w serwlecie coś mi nie wychodzi:

Kopiuj

String przycisk = request.getParameter("przycisk");
if (przycisk=="przycisk1") lista = DAO.getInstance().powt(kolumna);
else lista = DAO.getInstance().unik(kolumna);
System.out.print(przycisk);

W takim wypadku za każdym razem wykonuje się operacja w 'else', dodam, że System.out.print(przycisk); poprawnie wyświetla w konsoli wartość przycisku. Jednak coś z tym porównaniem w ifie jest chyba nie tak.

edytowany 1x, ostatnio: Brylu 2012-12-31 15:39

Visher

2012-12-31 16:49

Visher2012-12-31 16:49

Rejestracja:ponad 13 lat
Ostatnio:ponad 11 lat
Postów:212

Tak, bo w Javie napisy porównuje się za pomocą metody equals (lub equalsIgnoreCase), tj. przycisk.equals("przycisk1")

Brylu

2012-12-31 16:58

Brylu2012-12-31 16:58

Rejestracja:prawie 17 lat
Ostatnio:ponad 11 lat

No tak. Ale gafa. Ale nadal wynik wyświetla się na nowej stronie, jakby AJAX był pominięty.

Visher

2012-12-31 18:18

Visher2012-12-31 18:18

Rejestracja:ponad 13 lat
Ostatnio:ponad 11 lat
Postów:212

Spróbuj zamienić function() na function(event) i zamiast return false daj event.preventDefault();

Brylu

2013-01-01 08:46

Brylu2013-01-01 08:46

Rejestracja:prawie 17 lat
Ostatnio:ponad 11 lat

Niestety nadal to samo.

Visher

2013-01-01 21:48

Visher2013-01-01 21:48

Rejestracja:ponad 13 lat
Ostatnio:ponad 11 lat
Postów:212

No to ja już straciłem pomysły. Jeżeli request dochodzi do serwera to spróbuj wywalić action="Servlet.do" z forma. Może nic nie zrobi, albo napisz action="#"

Brylu

2013-01-01 22:30

Brylu2013-01-01 22:30

Rejestracja:prawie 17 lat
Ostatnio:ponad 11 lat

Po wywaleniu action z forma nic się nie wykonuje. Gdy zmieniłem typ przycisku na 'button' oraz tutaj typ również zmieniłem

Kopiuj

$("#formAjax>input[type=button]").click(function(event)

to po naciśnięciu przycisku nie ma w ogóle żadnej reakcji. Może coś w tym przechwytywaniu przycisków jest nie tak?

Visher

2013-01-01 22:45

Visher2013-01-01 22:45

Rejestracja:ponad 13 lat
Ostatnio:ponad 11 lat
Postów:212

U mnie na takim schemacie działa:
http://jsfiddle.net/L3nAx/1/

Może spróbuj na takim schemacie:

Kopiuj

$('#ajaxFormularz> input[type="submit"]').click(function() {

Liczba odpowiedzi na stronę

Treść *

Treść

Podgląd

Kliknij, aby dodać treść...

Kliknij, aby dodać załącznik lub wklej ze schowka.

Instrukcja obsługi Markdown

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj underline.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, , , <kbd>, <del>, , <dfn>, <pre>, <blockquote>, <hr/>, ,  oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H2O i m2 otrzymasz: H₂O i m².

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript document.write('Hello World'); ```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

Alt+L - zaznaczenie całej linii
Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

Ctrl+Enter - dodaj post
⌘+Enter - dodaj post (MacOS)

JSP i servlety z wykorzystaniem AJAX

Smileys & People

Animals & Nature

Food & Drink

Travel & Places

Activities

Objects

Symbols

Typografia

Linki

Wewnętrzne odnośniki

Wspomnienia użytkowników

Znaczniki HTML

Skróty klawiszowe

Indeks górny oraz dolny

Składnia Tex

Kod źródłowy

Krótkie fragmenty kodu

Kod wielolinijkowy

Tabelki

Lista uporządkowana i nieuporządkowana

Składnia Markdown

Skróty klawiszowe