Przesyłanie i odbieranie zmiennej JS - PHP za pomocą AJAX

Przesyłanie i odbieranie zmiennej JS - PHP za pomocą AJAX
SZ
  • Rejestracja:prawie 8 lat
  • Ostatnio:około 2 miesiące
  • Postów:28
0

Witam,
próbuję ogarnąć jak przekazać zmienną z JS do PHP za pomocą AJAXa i nie potrafię tego ogarnąć

Kopiuj
<form >  
<select name="size">
	<option selected="selected" value="10">100x150</option>
	<option value="11">60x190</option>
	<option value="12">210x150</option>
	<option value="13">40x60</option>
</select>
</form>
Kopiuj
$( "select[name=size]" ).change(function() {
	
	var e = document.getElementById("size");
	var selectedValue = e.options[e.selectedIndex].value;
	
		$.ajax({
            type:"POST", 
            url:"select.php", 
            data: {valueKey:selectedValue},
		});
			
			
})
Kopiuj
<?php

$selectedValue = $_POST['valueKey'];

echo $selectedValue;


?>

Ten skrypt działa tak jak powinien, a przynajmniej spełnia taką funkcję o jaką mi chodziło. Po wybraniu opcji bez przeładowania strony przekazuje wartość do zmiennej selectedValue. Teraz chciałbym wartość tej zmiennej pobrać w pliku php i na podstawie wybranej opcji wyświetlić na stronie bez przeładowania odpowiednią treść.

Mógłby mnie ktoś naprowadzić na to jak skorzystać tu z AJAXa próbowałem ale nie wychodzi mi to pierwszy raz próbuję coś zrobić za pomocą AJAX

edytowany 1x, ostatnio: szpryc
stivens
  • Rejestracja:ponad 8 lat
  • Ostatnio:około 3 godziny
0

To pokaz jak probowales to robic bo tam zadnego wywolania ajaxa nie ma i skad mamy wiedziec na czym stanales


λλλ
SZ
Przepraszam, edytowałem post. Postępowałem według różnych porad znalezionych w sieci
stivens
Ale masz zamiar cos z tym w PHP robic czy rzeczywiscie tak jak w przykladzie Od razu zwracasz ta sama wartosc?
SZ
  • Rejestracja:prawie 8 lat
  • Ostatnio:około 2 miesiące
  • Postów:28
0

Chcę później użyć kilku instrukcji warunkowych a dopiero później wyświetlić odpowiednią treść, ale najpierw chciałem sprawdzić czy udało mi się przesłać tę wartość

edytowany 1x, ostatnio: szpryc
stivens
  • Rejestracja:ponad 8 lat
  • Ostatnio:około 3 godziny
0

Tutaj masz przykladowe wywolanie ajaxa. Patrz na success

Screenshot_20180203-143150.png


λλλ
edytowany 1x, ostatnio: stivens
Patryk27
Jest to stara składnia - aktualnie wykorzystuje się $.ajax().done() itd.
SZ
  • Rejestracja:prawie 8 lat
  • Ostatnio:około 2 miesiące
  • Postów:28
0

No sprawdziłem i funkcja działa w js zwraca info że wysłało dane ale nie jestem nadal w stanie tego pobrać php

dostaję komunikat

Notice: Undefined index: valueKey in D:\XAMPP\htdocs...\form\select.php on line 3

edytowany 2x, ostatnio: szpryc
stivens
  • Rejestracja:ponad 8 lat
  • Ostatnio:około 3 godziny
0

Nadaj formularzowi jakies id i dane ktore wysylasz daj jako $('#formid').serialize() i w PHP traktuj te dane jak ze zwyklego formularza (kluczami beda name inputow)


λλλ
edytowany 1x, ostatnio: stivens
stivens
  • Rejestracja:ponad 8 lat
  • Ostatnio:około 3 godziny
0

Albo wez "valueKey" w cudzyslow ;) bo wysylasz undefined : x


λλλ
edytowany 1x, ostatnio: stivens
Patryk27
Cudzysłów tutaj nic nie zmieni.
SZ
  • Rejestracja:prawie 8 lat
  • Ostatnio:około 2 miesiące
  • Postów:28
0

niestety "valueKey" nic nie zmienia

Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0

method, a nie type.


stivens
To jest alias niby
Patryk27
Hm, fakt - zgodnie z dokumentacją, na to by wychodziło :/
SZ
zmiana też nic nie daje
Patryk27
@szpryc: wrzuć dokładny, minimalny kod prezentujący problem.
stivens
A ta serializacja? Chociaz slownik tez powinien wchodzic
Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
1

@szpryc: nie wysyłasz Ty przypadkiem undefined tam?

Kopiuj
document.getElementById("size");

-> nie masz nigdzie przecież elementu o id size.

Zresztą, idąc the-jQuery-way, wystarczy $(this).val().


edytowany 2x, ostatnio: Patryk27
stivens
Fakt, select ma name tylko
SZ
już wrzucam kod jak aktualnie wygląda, jest id size tylko jak to dodawałem to ciągle jeszcze coś sam kobinowałem i dodałem wersje bez tego id
SZ
tamta część działa tak jak zakładałem po sprawdzeniu np. przez alert gdy wybieram którąś opcje dostaję alert z właściwą wartością
SZ
  • Rejestracja:prawie 8 lat
  • Ostatnio:około 2 miesiące
  • Postów:28
0
Kopiuj
 <!doctype html>
<html lang="pl-PL">
 <head>
  <meta charset="utf-8">
  <title>selected test</title>

  <script src="jquery-3.3.1.js"></script>
</head>
<body>
 


<form id="testform" method="post" action="select.php" >  
<select name="size" id="size">
	<option selected="selected" value="10">100x150</option>
	<option value="11">60x190</option>
	<option value="12">210x150</option>
	<option value="13">40x60</option>
</select>
</form>


 
 <script>

$( "select[name=size]" ).change(function() {
	
	var e = document.getElementById("size");
	var selectedValue = e.options[e.selectedIndex].value;
	
        $.ajax({
            mthod:"post", 
            url:"select.php", 
            data: {
				valueKey : selectedValue,
			},
        
		
		}).done(function(){
			alert("wysłano");
		});
 
});
 
</script>
 </body>
</html>
Kopiuj
<?php

$selectedValue = $_POST['valueKey'];
 
echo ($_POST['valueKey']);

?>
stivens
  • Rejestracja:ponad 8 lat
  • Ostatnio:około 3 godziny
0

A teraz to masz literowke w method


λλλ
Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0
  1. method, a nie mthod.
  2. let selectedValue = $(this).val(); wystarczy.
  3. Zrób po stronie PHP var_dump($_POST) oraz var_dump($_GET) + podejrzyj dane z poziomu konsoli przeglądarki (zakładka Network w przypadku Chrome'a).

edytowany 3x, ostatnio: Patryk27
Zobacz pozostałe 2 komentarze
SZ
w przeglądarce zwróciło puste tablice
Patryk27
Dla $_POST oraz $_GET, tak?
Patryk27
Co pokazuje zakładka Network?
SZ
Nie wiem jak to sprawdzić w tej zakładce :( przepraszam
SZ
  • Rejestracja:prawie 8 lat
  • Ostatnio:około 2 miesiące
  • Postów:28
0

Nie wiem czy to o to chodziło
screenshot-20180203172359.png

Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0

Tak, o to chodziło - i jak na dłoni widać, że:

  1. Wykonujesz żądanie GET, a nie POST.
  2. Nic nie wysyłasz (inaczej poniżej General, Response Headers oraz Request Headers byłaby czwarta zakładka z informacjami o tym, co wysyłasz).

Zatem "coś" masz nie tak ze swoim kodem JS - być może nie wczytujesz najnowszej wersji, tylko jakąś kopię z pamięci podręcznej or sth - ciężko stwierdzić.


SZ
myślałem że mam coś wpisać w konsole :)
SZ
właśnie też dziwiło mnie to GET w tamtym miejscu ale nie miałem pojęcia o czym to świadczy
SZ
  • Rejestracja:prawie 8 lat
  • Ostatnio:około 2 miesiące
  • Postów:28
0

Próbowałem uruchomić to nie wprowadzając żadnych zmian: http://kursjs.pl/kurs/jquery/jquery-ajax.php#selectyjson I efekt jest taki sam jak z moim kodem, a zakładka sieć jako Request Method tak samo pokazuje GET nie mam pojęcia czego ta wina

Czy możliwe że wina jest po stronie serwera xampp

edytowany 1x, ostatnio: szpryc
SZ
  • Rejestracja:prawie 8 lat
  • Ostatnio:około 2 miesiące
  • Postów:28
0

No i tu przesyła i nawet z odpowiednią wartością ale czemu php nie umie użyć tej wartości
screenshot-20180204081802.png

Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0

Pokaż Preview - teraz musi działać.


SZ
  • Rejestracja:prawie 8 lat
  • Ostatnio:około 2 miesiące
  • Postów:28
0

nadal undefined
screenshot-20180204163534.png

aczkolwiek jak zrobię tak:

Kopiuj
<?php

$selectedVal = $_GET['valueKey'];
 
die(json_encode($_POST));
	
?>

to poniżej informacji undefined podaje pobraną wartość

screenshot-20180204163912.png

Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0

No musiałbyś robić $_POST['valueKey'] :-P


SZ
  • Rejestracja:prawie 8 lat
  • Ostatnio:około 2 miesiące
  • Postów:28
0

To samo jak zrobię echo $_POST[valueKey];
screenshot-20180204164517.png
jak to mam teraz ugryźć bo już nie mam pojęcia

Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0

Zapytanie jest wykonywane poprawnie - co Ci wrzuca ten błąd undefined index do treści strony?


SZ
  • Rejestracja:prawie 8 lat
  • Ostatnio:około 2 miesiące
  • Postów:28
0

Już wiem dlaczego wywalało błąd przy pierwszym załadowaniu strony nie pobierało wartości z domyślnego pola więc praktycznie wartość jeszcze nie istniała. Problem zniknął po zastosowaniu isset

Kopiuj
<?php

if(isset($_POST['valueKey'])){

?>	
	<div>
	<p><?php echo $_POST['valueKey']; ?></p>	
	</div>


<?php


};
	
?>

ale mam jeszcze jedną zagwozdkę dlaczego wartość jest wyświetlana w preview a normalnie na stronie nie
screenshot-20180209090306.png

Kliknij, aby dodać treść...

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 <u>underline</u>.

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>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> 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 H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

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)