Forum PHP.pl > [AJAX][Java] onclick

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [AJAX][Java] onclick - jak zrobić

MaTeK_

30.11.2010, 21:00:14

Witam.
Przeglądam internet i nie mogę znaleźć normalnego rozwiązania. Prosiłbym po prostu o zwykły kod, który będzie działał na zasadzie, że ktoś kliknie w przycisk "tekst" i po kliknięciu pokaże się ile razy klikano w przycisk. Była gdzieś akcja, że klikało się "Postaw znicz" i po tym pokazywano "x osób postawiło znicz" - gdzie x to liczba kliknięć w ten guzik. Nie wiem jak dokładnie się nazywa, ale chyba onclick

smietek

30.11.2010, 21:41:37

Do tego elementu dodajesz akcję po kliknięciu (tak, najłatwiej onclick). Wykonujesz AJAXem skrypt PHP, który dodaje do bazy danych daną wartość (1), a następnie zwraca ilość kliknięć w przycisk i wyświetla obok/na tym elemencie.

mmica

30.11.2010, 22:30:11

Hey ;]

Sam z ciekawości spróbowałem to napisać, bo jeszcze nigdy wcześniej tego nie pisałem. Całe rozwiązanie oparłem o cztery pliki: index.html, ajax.js, licznik.php oraz licznik.txt. W index.html masz button i dołączony plik ajax.js obsługujący go, a w licznik.php skrypt PHP, który zapisuje kliknięcia i zwraca ich ilość. Plik licznik.txt przechowuje informację o kliknięciach.

index.html:

[HTML] pobierz, plaintext 
<html>
	<head>
		<script type="text/javascript" src="./ajax.js"></script>
	</head>
<body>
	<button onclick="MakeRequest()">Click!</button>
    <div id="licznik">
    </div>
</body>
</html>
[HTML] pobierz, plaintext

ajax.js:

[JAVASCRIPT] pobierz, plaintext 
function getXMLHttp()
{
  var xmlHttp
 
  try
 {
    //Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  {
    //Internet Explorer
    try
    {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
      try
      {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e)
      {
        alert("Your browser does not support AJAX!")
        return false;
      }
    }
  }
  return xmlHttp;
}
 
function MakeRequest()
{
  var xmlHttp = getXMLHttp();
 
  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4)
    {
     HandleResponse(xmlHttp.responseText);
    }
}
 
  xmlHttp.open("GET", "ajax.php?get=qwe", true);
  xmlHttp.send(null);
}
 
function HandleResponse(response)
{
  document.getElementById('licznik').innerHTML = response;
}
[JAVASCRIPT] pobierz, plaintext

licznik.php:

[PHP] pobierz, plaintext 
<?php
	if(isset($_GET['get']))
	{
		$clicks = @file_get_contents('./licznik.txt');
		@file_put_contents('./licznik.txt', $clicks+1, LOCK_EX);
 
		echo $clicks.' clicks!';
	}
?>
[PHP] pobierz, plaintext

Plikowi licznik.txt musimy nadać prawa do zapisu! W innym wypadku otrzymamy błąd zapisu do pliku. Napisane na szybko

!

Pozdrawiam,
mmica

MaTeK_

1.12.2010, 15:38:41

Kod

/ajax.php was not found on this server.

taki mam komunikat

mmica

1.12.2010, 16:12:55

Mój błąd .. tak się kończy edytowanie kodu zaraz przed wysłaniem (zmieniłem nazwy plików i nie uwzględniłem tego w kodzie). Błąd znajduje się w pliku ajax.js w linii 45.

Jest:

[JAVASCRIPT] pobierz, plaintext 
xmlHttp.open("GET", "ajax.php?get=qwe", true);
[JAVASCRIPT] pobierz, plaintext

a powinno być:

[JAVASCRIPT] pobierz, plaintext 
xmlHttp.open("GET", "licznik.php?get=qwe", true);
[JAVASCRIPT] pobierz, plaintext

Pozdrawiam,
mmica

MaTeK_

1.12.2010, 16:17:54

Działa. Dzięki wielkie .

bartek_fm

12.12.2010, 21:44:43

Mam dwa pytania.

Czy ten kod uniemożliwia zliczanie kliknięć przez tę samą osobę.
Czy jest możliwość zbudowania takiego skryptu z mniejszą ilością plików?

Pozdrawiam,
Bartek

mmica

13.12.2010, 07:03:02

@bartek_fm:
1. Nie, ale możesz to zrobić dodając do jakiejś bazy IPs klikających i sprawdzać, czy IP kolejnego klikającego nie znajduje się przypadkiem już w bazie, a jeżeli tak, to nie dodawać kliknięcia. To samo możesz zrobić w oparciu o cookies, ale jest to mniej pewny sposób.

2. Tak. Na upartego możesz to wszystko umieścić w jednym pliku.

Pozdrawiam,
mmica

hultman

13.12.2010, 10:21:39

Dzięki bardzo, mi także się przydały informacje zawarte w tym temacie.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.