Witam,
mamy taki kod:
<!DOCTYPE html>
<html>
<body>
<p>Kliknij w przycisk</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
<?php
echo "cos";
?>;
}
</script>
</body>
</html>
Chce po kliknięciu w przycisk wywołać kod php bez przeładowania strony, jak to zrobić?
zainteresuj się hasłem AJAX
https://pl.wikipedia.org/wiki/AJAX
http://api.jquery.com/jquery.ajax/
http://shebang.pl/kursy/podstawy-jquery/r7-ajax/
http://kursjs.pl/kurs/ajax/ajax.php
http://javascript-html5-tutorial.pl/podstawy-ajax.html
http://www.html-css-ajax.com/podstawy-ajax.php
http://phpmajster.blogspot.com/2015/06/ajax-podstawy-ajax-i-obiekt.html
To nie do końca tak działa, nie da się w ten sposób mieszać języków, bo one się gdzie indziej odpalają i w innym czasie.
Jak sobie odpalasz stronę w Polsce (czy w innym kraju, gdzie mieszkasz), to przeglądarka wysyła żądanie HTTP do serwera (który może być gdziekolwiek, np. w Niemczech), zadaniem serwera jest zwrócić wygenerowany plik HTML (albo CSS, JS, JSON czy cokolwiek innego). Do generowania tych plików serwer może skorzystać ze skryptu PHP (ale PHP się odpala tylko po stronie serwera, przeglądarka już nie widzi tego PHP, tylko sam wygenerowany przez niego plik).
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
<?php
echo "cos";
?>;
}
</script>
Odpalając taki skrypt powodujesz tylko to, że skrypt PHP się odpali na serwerze i wynik zostanie dodany do generowanego kodu HTML. Czyli masz kawałek kodu HTML z załączonym tagiem <script>, który osadza JavaScript:
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
zostanie dodane do niego cos i bedziesz mial taki efekt
document.getElementById("demo").innerHTML = cos
Czyli w momencie, kiedy ten kod JS trafi do przeglądarki, to żadnego(!) PHPa już tam zwyczajnie nie będzie. Więc nie tędy droga.
Owszem, jak już przedmówca wspomniał, jest coś takiego jak AJAX i wtedy faktycznie możesz odpalić kod PHP (waląc jakieś zapytanie AJAXem), ale ten kod odpali się na serwerze, serwer może zwrócić odpowiedź, np. w popularnym formacie JSON i dopiero potem, kiedy dostaniesz zwrócone dane, to możesz je przetworzyć za pomocą JavaScriptu.
I tak się często robi. Pytanie tylko, czy w tym przypadku ci to potrzebne. Zastanów się, czy to, co chcesz zrobić nie da się zrobić za pomocą czystego JavaScriptu (co w ogóle chcesz zrobić, tak bardziej konkretnie? Co ma się stać po kliknięciu przycisku). Czy nie jest tak przypadkiem, że chcesz na siłę mieszać PHP dlatego, że jest to język, który lepiej znasz? (tylko, że to droga strasznie naokoło).
@LukeJL: Ubiegłeś mnie koleś :P
W sumie wczoraj nie miałem czasu, żeby się rozpisywać, za to dzisiaj chciałem w spokoju napisać mniej-więcej dokładnie to samo, co Ty.... ale mnie wyprzedziłeś. Nie lubię Cię ;)
LukeJL napisał(a):
I tak się często robi. Pytanie tylko, czy w tym przypadku ci to potrzebne. Zastanów się, czy to, co chcesz zrobić nie da się zrobić za pomocą czystego JavaScriptu (co w ogóle chcesz zrobić, tak bardziej konkretnie? Co ma się stać po kliknięciu przycisku). Czy nie jest tak przypadkiem, że chcesz na siłę mieszać PHP dlatego, że jest to język, który lepiej znasz? (tylko, że to droga strasznie naokoło).
Mam około 1000 linii kodu w php i chce żeby to się wykonało po kliknięciu w przycisk. Może i da się to zrobić za pomocą JS, ale nie umiem tego zrobić i za dużo przerabiania. Więc zostaje AJAX i JSON. Podrzucicie jakieś przykłady z takim zastosowaniem?
Muszę Cię zmartwić - zarówno Ajax(Asynchronous JavaScript and XML), jak i Json(JavaScript Object Notation) to jest JavaScript (aczkolwiek ładnie obudowany i w mojej ocenie - przyjaźniejszy w użytkowaniu)...
A co do przykładów - dałem Ci w pierwszym poście 7 linków, w których masz to wyjaśnione.
Zajrzałeś do nich? Przejrzałeś? Poczytałeś?
Bo wygląda na to, że tak średnio, a teraz liczysz na gotowca :(
Mam około 1000 linii kodu w php i chce żeby to się wykonało po kliknięciu w przycisk.
Odpalić te "1000 linii kodu w php" możesz wykonując zapytanie HTTP do serwera (np. przez AJAX), problem w tym, że wykona się to na serwerze, do przeglądarki za to mogą iść dane (np. w postaci JSON), więc będziesz musiał pokombinować ze swoim skryptem PHP, żeby wysyłał ci to, co chcesz do przeglądarki.
Może i da się to zrobić za pomocą JS, ale nie umiem tego zrobić i za dużo przerabiania. Więc zostaje AJAX i JSON.
AJAX to też JS. Taki buzzword/skrót myślowy na określenie pewnej techniki. I tak w JS będziesz musiał odebrać dane z serwera (oraz wcześniej: zainicjalizować połączenie z serwerem, wysyłając żądanie).
A będziesz w stanie załapać co się dla przykładu tutaj dzieje? Dodam tylko tyle że mam z tym do czynienia na codzień :-)
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button data-bind="click: loadHTML">Click me!</button>
<span data-bind="html: someHTML"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script>
var ViewModel = function() {
var self = this;
self.someHTML = ko.observable();
self.loadHTML = function() {
$.ajax({
url: 'data.php',
type: 'GET',
data: {},
dataType: 'json'
}).done(function(data) {
self.someHTML('Random programming language: <strong>' + data + '</strong>');
});
};
};
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
data.php
<?php
$languages = array('C++', 'JAVA', 'C#', 'DELPHI', 'PHP',
'Python', 'Ruby', 'JavaScript');
$data = $languages[rand(0, 7)];
header('Content-Type: application/json');
echo json_encode($data);
drorat1 napisał(a):
A będziesz w stanie załapać co się dla przykładu tutaj dzieje? Dodam tylko tyle że mam z tym do czynienia na codzień :-)
index.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <button data-bind="click: loadHTML">Click me!</button> <span data-bind="html: someHTML"></span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <script> var ViewModel = function() { var self = this; self.someHTML = ko.observable(); self.loadHTML = function() { $.ajax({ url: 'data.php', type: 'GET', data: {}, dataType: 'json' }).done(function(data) { self.someHTML('Random programming language: <strong>' + data + '</strong>'); }); }; }; ko.applyBindings(new ViewModel()); </script> </body> </html>data.php
<?php $languages = array('C++', 'JAVA', 'C#', 'DELPHI', 'PHP', 'Python', 'Ruby', 'JavaScript'); $data = $languages[rand(0, 7)]; header('Content-Type: application/json'); echo json_encode($data);
Tak wiem.Czyli podstawiając swój kod php do pliku data.php i wszędzie tam gdzie miałem echo wystarczy pisać echo json_encode powinno działać?
W Twoim przypadku to wystarczyłoby takie coś:
ajax.php
<?php
echo "cos";
oraz index.php
<!DOCTYPE html>
<html>
<body>
<button>Click me</button>
<p></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('button').click(function(e) {
$.ajax({
url: 'ajax.php',
type: 'GET',
data: {},
dataType: 'text'
}).done(function(data) {
$('p').html(data);
});
});
</script>
</body>
</html>
Czyli jak testujesz to na localhost to wpisując np.
nie otrzymujesz nic więcej poza tekstem: cos
natomiast w index.php:
$('button').click(function(e) {
$.ajax({
url: 'ajax.php',
type: 'GET',
data: {},
dataType: 'text'
}).done(function(data) {
$('p').html(data);
});
});
url - odpalasz ten ajax.php który wypluwa Ci wynik "cos" jako tekst
type - metoda GET
data: {} - nie dajesz tam żadnych parametrów bo i po co
dataType: "text" - Twój ajax.php nie zwraca żadnego JSON tylko tekst cos,
alternatywnie:
dataType: "json" to w Twoim ajax.php musiałoby być takie coś:
<?php
header('Content-Type: application/json');
echo json_encode("cos");
Twój przykład jest tak prosty że nawet atrybutów id nie musisz nadawać bo $('p') albo $('button') operuje na tych dwóch konkretnych elementach HTML a nie masz tu żadnego innego.
Konkretniej masz więc 2 pliki php: ajax.php oraz index.php i odpalasz tylko:
http://localhost/index.php a tam jQuery odpali sobie po kliknięciu w przycisk ten ajax.php który wypluwa ten tekst.
czyli nie ważne ile będzie tych wywołań echo? mogę nawet tabele wyświetlać i tak powinno działać?
Zasadniczo możesz w ten sposób nawet (prawie) całą stronę wygenerować po stronie serwera i przesłać do przeglądarki.
W dużym uproszczeniu:
Zwróć uwagę na dodawanie komentarzy do postu na 4P - coś piszesz, wciskasz "wyślij" i komentarz już jest. Czyli działa to w oparciu o AJAX. Bez tego sytuacja by wyglądała tak, że wciskasz "wyślij", dane są przesyłane do serwera, serwer generuje "nową"stronę (zawierającą już Twój komentarz), która następnie jest przesyłana do przeglądarki. Wszystko to trwałoby kilka sekund (zamiast "od razu").
Odpowiadając na twoje pytanie - tak, możesz wiele razy i w wielu miejscach sobie wstawić elementy AJAX'a - tylko im więcej tego, tym łatwiej się pogubić. Ale to kwestia doświadczenia. Przyjrzyj się niektórym stronom z "interkatywnymi" aplikacjami (chociażby workflowy.com ) i zobacz, jak one działają. Wszystko się dzieje na żywo, bez przeładowywania całości.
Właśnie o to mi chodziło. Jeszcze chcę jak już ten przycisk zostanie wciśnięty, to aby ten kod co jest ajax.php odświeżał się co sekundę. Próbuje użyć setInterval tylko nie wiem w którym miejscu to zastosować
drorat1 napisał(a):
<!DOCTYPE html> <html> <body> <button>Click me</button> <p></p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $('button').click(function(e) { $.ajax({ url: 'ajax.php', type: 'GET', data: {}, dataType: 'text' }).done(function(data) { $('p').html(data); }); }); </script> </body> </html>
Ja bym to tak zrobił:
ajax.php
<?php
$array = array(
'Baba bada baobaby. Baba dba o oba baobaby.',
'Czarna krowa w kropki bordo gryzła trawę kręcąc mordą.',
'Gdy Pomorze nie pomoże, to pomoże może morze, a gdy morze nie pomoże to pomoże może Gdańsk.',
'Król Karol kazał kupić królowej Karolinie korale koloru koralowego.',
'Jerzy nie wierzy że na wieży leży gniazdo nietoperzy.',
'Matka tka Katka tkakaczka czka tak jak tka.',
'Nie pieprz Pietrze wieprza pieprzem, bo przepieprzysz pieprzem wieprza.',
'Rozrewolweryzowany rewolwerowiec z rozrewolweryzowanym rewolwerem',
'Trzeba trzcinę trzepać trzcinową trzepaczką',
'W Szczebrzeszynie chrząszcz brzmi w trzcinie i Szczebrzeszyn z tego słynie',
'Zamień kamień w krzemień, przemień krzemień w kamień.',
);
echo $array[rand(0, 10)];
index.php
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<html>
<body>
<button>Enable</button>
<p></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var lock = false;
var interval = null;
var enabled = false;
$('button').click(function(e) {
enabled = !enabled;
if (enabled)
{
interval = setInterval(function() {
load();
}, 2000);
$(this).html('Disable');
}
else
{
clearInterval(interval);
lock = false;
$(this).html('Enable');
}
});
function load()
{
if (lock) return;
lock = true;
$.ajax({
url: 'ajax.php',
type: 'GET',
data: {},
dataType: 'text'
}).done(function(data) {
$('p').html(data);
}).fail(function(data) {
$('p').html('Error occurred!');
}).always(function(data) {
lock = false;
});
}
</script>
</body>
</html>
Po wyłączeniu odświeżania zostaje ostatnio wylosowany element. Zastanawiam się jak zrobić żeby nie został ostatni element tylko sam przycisk. Po prostu dodać kolejny plik w którym będzie samo puste echo?, ale nie wiem czy to najlepsze rozwiązanie.
A nie można tak?
$('p').html('');