• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wysyłanie z JavaScript do wordpress za pomocą AJAX

Object Storage Arubacloud
0 głosów
232 wizyt
pytanie zadane 25 sierpnia 2020 w JavaScript przez freakshow Nowicjusz (200 p.)

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

1 odpowiedź

+1 głos
odpowiedź 25 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)
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.
komentarz 25 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

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.

komentarz 25 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)

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. 

komentarz 25 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)
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.

Podobne pytania

0 głosów
1 odpowiedź 1,214 wizyt
0 głosów
1 odpowiedź 430 wizyt
pytanie zadane 26 listopada 2015 w JavaScript przez makoso Mądrala (7,380 p.)
0 głosów
2 odpowiedzi 1,752 wizyt

92,761 zapytań

141,685 odpowiedzi

320,485 komentarzy

62,105 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...