Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript][AJAX]JS + AJAX bez jQuery
casperii
post 24.05.2022, 10:42:19
Post #1





Grupa: Zarejestrowani
Postów: 680
Pomógł: 28
Dołączył: 14.08.2014

Ostrzeżenie: (0%)
-----


Panowie mam zagwostke , mianowicie mam plik *.js w którym mam kod:


  1.  
  2. document.addEventListener('submit', function(e){
  3. e.preventDefault();
  4.  
  5. const form = document.querySelector("#myButton")
  6. const firstVal = form.firstVal.value
  7. const secondVal = form.secondVal.value
  8.  
  9. const obj = {
  10. firstVal: firstVal,
  11. secondVal: secondVal
  12. };
  13.  
  14. alert('pokaż: ' + JSON.stringify(obj));
  15. });
  16.  


powyższy kod pokaże mi alert z dwóch pól input , teraz te dane chciałbym wysłać ajaxem/ postem /getem , niestety ten plik .jsowy nie rozróżnia znaku dolara , bo nie ma biblioteki jQuery.

Pytanie brzmi , czy da radę importować do pliku .js inny plik js ? Czy może zrobić coś na zasadzie że w miejsce alertu stworzyć funkcje która przekaże mi dane do innej funkcji i w pliku index pod zaincludowanym .js'em dodać funkcje która odbierze mi te dane? Tylko czy to ma sens i można tak zrobić?
Go to the top of the page
+Quote Post
viking
post 24.05.2022, 10:56:05
Post #2





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


https://developer.mozilla.org/en-US/docs/We...API/Using_Fetch


--------------------
Go to the top of the page
+Quote Post
casperii
post 24.05.2022, 11:26:04
Post #3





Grupa: Zarejestrowani
Postów: 680
Pomógł: 28
Dołączył: 14.08.2014

Ostrzeżenie: (0%)
-----


@viking ok wrzuciłem do swojego .js'a kod:

  1. const data = { username: 'example' };
  2.  
  3. fetch('test.php', {
  4. method: 'POST', // or 'PUT'
  5. headers: {
  6. 'Content-Type': 'application/json',
  7. },
  8. body: JSON.stringify(data),
  9. })
  10. .then(response => response.json())
  11. .then(data => {
  12. console.log('Success:', data);
  13. })
  14. .catch((error) => {
  15. console.error('Error:', error);
  16. });
  17.  
  18.  
  19. w pliku test.php , sam tekst "test tekstowy"
  20.  
  21. po odpaleniu skryptu, nie otrzymuje komunikatu zwracanego z test.php ,a dodatkowo zarzuca .js błędem:
  22. Error: SyntaxError: Unexpected token e in JSON at position 2
  23.  
  24. chodzi o linie:
  25. [html]
  26. console.error('Error:', error);

[/html]
Go to the top of the page
+Quote Post
nospor
post 24.05.2022, 11:35:30
Post #4





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




No a test.php zwraca poprawny JSON? Bo z komunikatu bledu wynika ze jednak nie.

Zajrzyj w konsoli do zakladaki NETWORK/SIEC i zobacz co lest w test.php

Cytat
w pliku test.php , sam tekst "test tekstowy"

to moze byc problemem


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
casperii
post 24.05.2022, 11:38:35
Post #5





Grupa: Zarejestrowani
Postów: 680
Pomógł: 28
Dołączył: 14.08.2014

Ostrzeżenie: (0%)
-----


Cytat(nospor @ 24.05.2022, 12:35:30 ) *
No a test.php zwraca poprawny JSON? Bo z komunikatu bledu wynika ze jednak nie.

Zajrzyj w konsoli do zakladaki NETWORK/SIEC i zobacz co lest w test.php


to moze byc problemem



a no tak,

  1. header('Content-Type: application/json; charset=UTF-8');
  2. $response = 'test';
  3. echo json_encode($response);


dzięki smile.gif


@viking , @nospor super tylko, że teraz zauważyłem, że wcale mi nie śle $_POST, bo jak rozumiem, moją zmienną dla post jest "data"

  1. const data = { username: 'example' };


tymczasem zwraca mi null

serio?questionmark.gif taka kombinacja działa:

  1. $content = trim(file_get_contents("php://input"));


a zwykły $_POST nie chce

Ten post edytował casperii 24.05.2022, 13:25:04
Go to the top of the page
+Quote Post
trueblue
post 24.05.2022, 16:28:49
Post #6





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Wysyłasz dane o typie application/json.
Jeśli chcesz mieć je w $_POST, to musisz wysłać multipart/form-data.

Ten post edytował trueblue 24.05.2022, 17:01:06


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 21:45