Wysyłanie z JavaScript do wordpress za pomocą AJAX

Question

Witam chcę przesłać dane z pliku JS do Wordpress'a, 

$("#save").on('click',function(){
                html2canvas(document.getElementById("create")).then(function (canvas) {
                var dataURL = canvas.toDataURL("image/png", 0.9);
                alert(dataURL);// tutaj wyświetla poprawnie
                $.ajax({
                	type:"POST",
                	url: '<?php echo admin_url('admin-ajax.php');?>'+'?action=save_photo',
                	data: dataURL
                }).done(function(){
                		alert(data);
                	})
            });
                
            });

alert(dataURL) wyświetla poprawnie, natomias alert(data) wyświetla się "Uncaught ReferenceError: data is not defined
    at Object.<anonymous> ((index):188)
    at c (jQuery.js:2)
    at Object.fireWith [as resolveWith] (jQuery.js:2)
    at l (jQuery.js:2)
    at XMLHttpRequest.<anonymous> (jQuery.js:2)"

Próbowałem przesyłać zamiast "data:dataURL" to "data:{action:'save_photo', 'imgURL':dataURL}

Za pomocą 

var data={action: 'save_photo', imgURL:dataURL}; 
$.post(send_rendered_photo.ajaxurl,data,function(data){
alert('wysłano '+data);
});

kod wordpress'a

function l_m_add_ajax_js(){
	wp_enqueue_script('l_m_ajax_render_photo', plugins_url('scripts/save_photo.js', __FILE__), true);
	if(isset($_SERVER['HTTPS'])){
		$protocol = 'https://';
	}
	else{
		$protocol = 'http://';
	}

	$params = array('ajaxurl'=>admin_url('admin-ajax.php',$protocol));
	wp_localize_script('l_m_ajax_render_photo','send_rendered_photo', $params);
}
add_action('wp_footer', 'l_m_add_ajax_js');
add_action('wp_ajax_save_photo', 'l_m_request_data');
add_action('wp_ajax_nopriv_save_photo', 'l_m_request_data');
function l_m_request_data(){
	if(isset($_POST['data'])){
	$zmienna = $_POST['data'];
	var_dump($zmienna);
	wp_die();
}
}

W drugim przypadku wyświetlił się komunikat "wysłano 0"

Podejrzewam że mam jakiś błąd w pliku JS ale nie mogę rozgryźć jaki

Dziekuję za wszelką pomoc

Answer 1

Po co Ci jQuery do AJAX'a? Prościej będzie użyć np. fetch API i np. funkcje asynchroniczne. Poza tym sprawdzałeś co pojawia się w zakładce network przeglądarki? Adres masz poprawny? Próbowałeś postmanem wysyłać rządanie?

Poza tym brzydkie nazewnictwo zmiennych i funkcji, raz, że po Polsku a dwa, że ciężko skumać te nazwy.

Comments

Po co Ci jQuery do AJAX'a?

Nie użył jQuery tylko do Ajaxa, ale też do podpięcia się na event. Jest to też tylko fragment kodu - być może całą aplikację ma napisaną w jQuery (wspomniał też o WordPress, który być może też gdzieś w templatkach korzysta z jQuery). Więc co stoi na przeszkodzie, żeby dla spójności używał jQuery do wysłania Ajaxa?

Zgadzam się z Tobą, że jQuery nie powinno się zaciągać tylko do jednej rzeczy (chyba, że wspieramy stare przeglądarki), ale zanim zasugeruje się użycie technologii B, warto zastanowić się czy technologia A nie jest aby używana przez całą aplikację (lub jej dużą część) - a w takim wypadku refactoring może okazać trudniejszy niż tylko zamiana przykładowego $.ajax na fetch lub axios itp.

---

Nie użył jQuery tylko do Ajaxa, ale też do podpięcia się na event. Jest to też tylko fragment kodu - być może całą aplikację ma napisaną w jQuery (wspomniał też o WordPress, który być może też gdzieś w templatkach korzysta z jQuery). Więc co stoi na przeszkodzie, żeby dla spójności używał jQuery do wysłania Ajaxa?

No O.K - rozumiem. Odpowiadając na Twe pytanie na końcu - uważam iż funkcje asynchroniczne oferują zwięźlejszą i czytelniejszą składnię. Właśnie po to nie tak dawno dodano funkcje asynchroniczne - kod działa jak asynchroniczny a wygląda jak synchroniczny. 

Zgadzam się z Tobą, że jQuery nie powinno się zaciągać tylko do jednej rzeczy (chyba, że wspieramy stare przeglądarki),

Czy nie lepiej jednak byłoby skorzystać np. z webpacka niż zaciągać taką kobyłę? 

ale zanim zasugeruje się użycie technologii B, warto zastanowić się czy technologia A nie jest aby używana przez całą aplikację (lub jej dużą część) - a w takim wypadku refactoring może okazać trudniejszy niż tylko zamiana przykładowego $.ajax na fetch lub axios itp.

No O.K - ale na przyszłość to dobra rada. Gdy rozpocznie inny projekt dobrze aby miał to na uwadze. 

---

Zgadzam się ogólnie z Twoimi radami. Jedynie odniosłem się do tego, żeby przed zmianą biblioteki lub API (na przykładzie Ajaxa w jQuery) upewnić się, czy dana osoba korzysta z tego w jednymi miejscu, czy w całym projekcie. Bo zamiana kilku linijek kodu i paczki w npm lub podpięcia innego skryptu w HTMLu, to nie to samo co refaktoryzacja całego projektu.