Problem z ajaxem

pytanie zadane 17 lipca 2017 w JavaScript przez `Krzychuu Stary wyjadacz (13,940 p.)

Witam

Mam problem z ajaxem gdy dodam opcję dataType: 'json', to wtedy kod przestaje działać i wyświetla się funkcja error, próbowałem to jakoś naprawić ale nie mam już pomysłów, jakby ktoś pytał to robię to na xampp ,tutaj mój kod:

      $.ajax({
            type: 'POST',
            url: 'sendmail.php',
	    dataType: 'json',
            data: {
                firstlastname: FirstName,
                email: Email,
                phonenumber: PhoneNumber,
                message: Message
            },
	   success: function (data) {				
		$('#sendmailRESULT').html('Twoja wiadomość została wysłana, postaramy sie odpowiedzić w ciągu 24!');
		$('#sendmailRESULT').addClass('SendMailTRUE');
            },
            error: function () {
                $('#sendmailRESULT').html('Przepraszamy ale nie udało się wysłać twojej wiadomości mamy chwilowe problemy z serwerem, zapraszamy ponownie później!');	
                $('#sendmailRESULT').addClass('SendMailFALSE');	
            }
        });

<?php

header("Content-type: application/json");

if (!empty($_POST['firstlastname'] && $_POST['email'] && $_POST['phonenumber'] && $_POST['message'])) {
	

	$FirstLastName = $_POST['firstlastname'];
	$Email = $_POST['email'];
	$PhoneNumber = $_POST['phonenumber'];
	$MessagePOST = $_POST['message'];
	
	
	$To= 'abc@wp.pl';
	$Title = 'Title';
	$Message = '';
	$Message .= 'Imię I Nazwisko: '.$FirstLastName.'\n';
	$Message .= 'Email: '.$Email.' Numer Telefonu: '.$PhoneNumber.'\n';
	$Message .= 'Wiadomość:'.$MessagePOST.'\n';
	$Headers = 'From: a@wp.pl'.'\r\n';
		
	
	$SendMail = mail($To, $Title, $Message, $Headers);
	
	
 
	$data = array();	
	
	if ($SendMail) {
		
		$data['SendMailTRUE'] = 'true';
		echo json_encode($data);		
		
	} else {
		
		$data['SendMailFALSE'] = 'false';
		echo json_encode($data);
		
	}
	
} else {

	header('Location: index.php');
	
}

?>

2 odpowiedzi

odpowiedź 17 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 18 lipca 2017 przez `Krzychuu

Najlepsza

Spróbuj tak:

w JavaScript:

const data = {
    firstlastname: FirstName,
    email: Email,
    phonenumber: PhoneNumber,
    message: Message
}

//i potem:
$.ajax({
    method: 'POST',
    url: 'sendmail.php',
    dataType: 'json',
    contentType: "application/json;charset=utf-8",
    data: `ajaxData=${JSON.stringify(data)}` },
//i dalej callback success itp.

i później w PHP:

  if(isset($_POST['ajaxData'])) {
    $json = json_decode($_POST['ajaxData'], true);
  } else {
    echo "Nie otrzymano danych!";
  }

//i potem wszystko masz w tablicy nie POST ale $json:
$json['firstlastname']; 
$json['email']; //itd.

A i jeszcze jedno... gdzie walidacja danych :) (i to wg mnie zarówno w JS jak i w PHP)

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

walidacje jest, według mnie nie było potrzeby żeby go tutaj dodawać

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

czyli wychodzi na to że cały kod mam źle napisany?

komentarz 17 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Ja Ajax robię najczęściej właśnie w ten sposób, co prawda nie używam jQuery tylko np. XMLHttpRequest + Promise ale to nic tu nie zmienia.

Generalnie do PHP przekazuję jedną zmienną w $_POST, w której zapisuję dane JS w formie json, a następnie w PHP parsuję sobie do nowej zmiennej te dane, wywołując tylko jeden raz json_decode (tutaj pamiętaj o drugim argumencie TRUE żeby sparsowało do tablicy asocjacyjnej).

Następnie operuję już na tej tablicy (tutaj $json) i nie ingeruję w ogóle w globalne $_POST (raczej staram się do minimum ograniczać bezpośrednie odwołania do post czy get).

Na sam koniec dane wyjściowe (response) dajesz do json_encode i voila :)

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

jaki może być błąd w moim kodzie, przed dodaniem dataType: 'json' kod działa a po dodaniu tej opcji pokazuje błąd z funkcji error, co może być nie tak?

komentarz 17 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)
edycja 17 lipca 2017 przez Tomek Sochacki

Spróbuj dodać:

headers: {'Content-Type': 'application/x-www-form-urlencoded'}

w wywołaniu metody ajax i zobacz jakie dane wysyłasz do servera i jakie otrzymujesz (w konsoli w zakładce Network). w ten nagłówek json usuń (z tego co pamiętam dataType:json powodowało stworzenie nagłówka 'application/json' ale nie jestem teraz tego pewien, musiałbym zajrzeć w dokumentację albo kod jquery).

Nieaktualne, człowiek najpierw napisze, a potem pomyśli :)

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

$.ajax({
            type: 'POST',
            url: 'sendmail.php',
			dataType: 'json',
			headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            data: {
                firstlastname: FirstName,
                email: Email,
                phonenumber: PhoneNumber,
                message: Message
            },
			success: function (data) {				
				$('#sendmailRESULT').html('Twoja wiadomość została wysłana, postaramy sie odpowiedzieć w ciągu 24!');
				$('#sendmailRESULT').addClass('SendMailTRUE');
            },
            error: function () {
                $('#sendmailRESULT').html('Przepraszamy ale nie udało się wysłać twojej wiadomości mamy chwilowe problemy z serwerem, zapraszamy ponownie później!');	
                $('#sendmailRESULT').addClass('SendMailFALSE');	
            }
        });

tak muszę zrobić?

komentarz 17 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Tak, o tym myślałem, ale jednak źle. Inaczej zróbmy, daj:

//zamiast:
headers: {'Content-Type': 'application/x-www-form-urlencoded'}

//spróbuj dodać: 
dataType: "json", 
contentType: "application/json;charset=utf-8",

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

dodałem ale nadal odpala się funkcja error, po czym sprawdzić w Network że wysłało żądanie ?

komentarz 17 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

No to może jeszcze zmień

data: `ajaxData=${encodeURIComponent(JSON.stringify(data))}` },

na:

data: `ajaxData=${JSON.stringify(data)}` },

a komunikację sprawdzasz tak:

w Chromie F12 -> zakładka Network -> i będąc w tym oknie odśwież stronę i wywołaj ajax (na kliknięcie, czy co tam masz) i patrz co się pokaże. Gdzieś pod koniec będziesz miał swoje żądanie i odpowiedź to popatrz co tam się pokazuje.

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

GET /strona/?firstlastname=asasdd&email=asd%40wp.pl&phonenumber=123456789&message=asd

w po kliknięciu wyślij strona się przeładowała a w Network jest coś takiego (w pasku gdzie się wpisuje adres też coś takiego jest)

komentarz 17 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

tee to czekaj czekaj, ty wysylasz to w żądaniu GET a nie POST, a my rozmawialiśmy cały czas o post.

Zamień

type: 'POST',

na:

method: "POST",

i zobacz. Nie pracuję na codzień w jQuery i nie znam za bardzo tej biblioteki ale w dokumentacji znalazłem na szybko, że metodę określa się w "method", a nie "type", a domyślnie jest GET (dlatego metoda ajax nie znalazła określenia metody i wywołała domyślne GET).

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

po zmianie nadal wysyła GET

mój cały kod:

		$.ajax({
            method: "POST",
            url: 'sendmail.php',
			dataType: "json", 
			data: `ajaxData=${JSON.stringify(data)}`,
			success: function (data) {				
				$('#sendmailRESULT').html('Twoja wiadomość została wysłana, postaramy sie odpowiedzieć w ciągu 24!');
				$('#sendmailRESULT').addClass('SendMailTRUE');
            },
            error: function () {
                $('#sendmailRESULT').html('Przepraszamy ale nie udało się wysłać twojej wiadomości mamy chwilowe problemy z serwerem, zapraszamy ponownie później!');	
                $('#sendmailRESULT').addClass('SendMailFALSE');	
            }
        });

komentarz 17 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Tylko,że jeśli dostajesz:

GET /strona/?firstlastname=asasdd&email=asd%40wp.pl&phonenumber=123456789&message=asd

to znaczy, że w ogóle coś nie tak wysyła, bo takiego żądania nie tworzymy teraz (nawet gdyby patrzeć w GET). Być może problem leży z cache przeglądarki?

Spróbuj odświeżać przez ctrl+f5 albo uruchomić stronę i ajax w trybie incognito i tam zobacz co daje Network.

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

w incognito tak samo, dodam że jak usunę dataType to wszystko działa (wyświetla się funkcja success)

komentarz 17 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

ok chyba wiem, widzisz, prze Ciebie musiałem wreszcie ruszyć tyłek i poczytać dokumentacji jquery (kiedyś musiał nadejść ten czas :)

właściwość dataType:'json' dotyczy nie request tylko odpowiedzi (response) i oznacza, że jQuery "pod spodem" sam wywoła metodę JSON.parse(response), a na pewno do klienta (response) wysyłasz również format JSON, a nie np. proste echo 'xxx' co mogłoby wywołać błąd w metodzie JSON.parse() ?

Jeśli nie określisz dataType to z tego co czytam jQuery próbuje określić to automatycznie na podstawie MIME type w response, więc jeśli Ci to działa prawidłowo to zostaw i nie wymuszaj na siłę json, bo być może gdzieś tam przekazujesz zwykły text (np. jak pisałem z instrukcji echo), który nie jest poprawnym formatem JSON. Ja w takich wypadkach JSON.parse ujmuję w bloczki try-catch i mam od razu info jak prześlę coś nie tak, ale w jQuery lepiej nie ingerować w domyślne mechanizmy.

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

bez dataType mogę używać json_encode w php żeby zwrócić dane do js?

komentarz 17 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)
edycja 17 lipca 2017 przez Tomek Sochacki

szczerze mówiąc nie wiem dokładnie jak jQuery operuje na response data, musiałbym to sobie potestować ale to jakoś przy okazji wieczorkiem sobie kiedyś usiądę do tego, ewentualnie można by w dokumentacji poczytać (teraz nie mam na to za bardzo czasu i tylko tak na chwile się odrywam do forum od roboty).

Być może jest tak, że jeśli nawet podasz dataType:json, ale nie da się tego zrobić (czyli wywołać JSON.parse) to jQuery próbuje w response umieścić inny typ wartości albo przechodzi wtedy do wywołania metody"error". Ty w swoich callback tak na prawdę w ogóle nie korzystasz z otrzymanych danych więc polegasz jedynie na samym fakcie czy request-response się udało, a co jest w response data to już Cię nie interesuje, więc ciężko tu dyskutować.

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

bardzo dziękuje za pomoc i poświęcony czas :)

komentarz 17 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

spoko :) najważniejsze, że udało się uruchomić aplikację.

A tak na marginesie, jeśli chcesz się uczyć "webu" to proponuję teraz ten kod z jQuery przepisać np. na użycie "czystego" XMLHttpRequest i Promise :) Masz punkt bazowy, który działa i wiesz już jak analizować ruch server-client więc czas poznać Ajax "od środka" :)

Powodzenia w nauce!

Pozdrawiam

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

Dziękuje za podpowiedz, tak właśnie zrobię, dziękuje i również pozdrawiam :)

komentarz 18 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

rozwiązałem problem z dataType, gdy wczoraj cały dzień walczyłem z tym dziś dostałem olśnienia :D, dodałem w anonimowej funkcji error i wyświetliłem za pomocą console.log(error)

            error: function (error) {
				
				console.log(error);
								
            }

co się okazało w obiekcie był błąd generowany przez php, między innymi chodziło o niedziałającą funkcje mail (na xampp) przez co wyskakiwał błąd po usunięciu linii mail (w celu testu) okazało się że funkcja dataType działa prawidło i przesyła dane do funkcji success. Jeszcze raz dziękuje Tomasz Sochacki za wczorajszą pomoc i poświęcony czas :)

komentarz 18 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

to dobrze, że udało się rozwiązać problem i co ważniejsze, znaleźć przyczynę :)

Tak na marginesie to kolejna nauczka, że tworząc aplikację od samego początku należy myśleć o ewentualnych błędach, testach itp. Nie bez powodu w node błąd jest przekazywany jako pierwszy argument w funkcjach zwrotnych w myśl zasady najpierw error, potem success :)

A przy okazji przynajmniej wreszcie coś nie coś poduczyłem się jQuery :) Nie korzystam z tej biblioteki ale to nie oznacza, że nie warto jej znać :)

Pozdrawiam

odpowiedź 17 lipca 2017 przez kosaa Stary wyjadacz (14,130 p.)

w konsoli JS masz jakieś bledy?

po dwa, w logach php co Ci wyswietla?

po trzy, strzelam, ze ten header w php jest zbędny
header("Content-type: application/json");

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

w konsoli 0 błędów, jedyny błąd który pokazuje php to że nie może odpalić funkcji mail(), ponieważ robię to na localhost

komentarz 17 lipca 2017 przez kosaa Stary wyjadacz (14,130 p.)

ale jest to error czy warning? jak error to wywala Ci się cały skrypt pewnie z kodem 500, daletego po stronie JS masz przekierowanie na Ajax::error

komentarz 17 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

Warning

komentarz 17 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Komunikację Ajax można łatwo weryfikować po wejściu w narzędzia deweloperskie Chrome (F12) -> zakładka Network i masz całą historię żądań i odpowiedzi http, tylko musisz odświeżyć stronę i ponownie wysłać request ajax żeby pokazało wszystko. Będziesz miał tam widoczny ciąg wysyłany jako żądanie oraz odpowiedź serwera.