Рейтинг

Джин · August 25, 2008

Решил сделать так, чтобы на сайте http://www.myduck.ru рейтинг каждому статусу менялся без обновления страницы.

В JS, а тем более в ajax я мало что понимаю....

вот тут нашел интересную статью по аяксу, попытался сделать также, но ничего не вышло

ниже я буду писать то что было (т.е. рабочий вариант php+mysql) и то что мне надо, но у меня ниче не вышло (..+ajax)

было

<a href="/rating.php?page=<?=$_GET['page']?>&pic=<?=$_GET['pic']?>&sort=<?=$_GET['sort']?>&action=up&id=<?=$status['id']?>" title="Нравится">+</a>
<b><?=$status['rating']?></b> // вывод рейтинга

стало

<a href="" onClick="java script:sendRequest('/rating.php?action=up&id=<?=$status['id']?>', 'result<?=$status['id']?>', getRequest);" title="Нравится">+</a>
<b id="result<?=$status['id']?>"><? include "./rating.php";?></b> // вывод рейтинга

сразу возник вопрос, раньше я передавал много переменных для того, чтобы потом после изменения рейтинга вернуться на ту же страницу а если не будет перезагрузки страницы, то и мне не надо передавать эти переменные?

изменения в rating.php

было:

if (!$id || !$sort || !$page || !$action)
	{
		echo 'Вы ввели не все необходимые сведения.<br>'.'Пожалуйста, вернитесь к предыдущей странице и повторите попытку.';
		echo "<a href='./index.php'>Вернуться на главную страницу</a>";
		exit;
	}
	else {
		setcookie ("limit".$id,"yes",time()+43200, "/");

		if ($action == 'up') {
			$query = "UPDATE `status` SET `rating` = `rating` + 1 WHERE `id` = $id";
		}
		elseif ($action == 'down') {
			$query = "UPDATE `status` SET `rating` = `rating` - 1 WHERE `id` = $id";
		}  

		$result = mysql_query($query);
		if ($result)
		{			
			header("Location: index.php?page=$page&pic=$pic&sort=$sort");   
		}

	}

стало

if (!$id || !$action)
	{
		echo $status['rating'];
	}
	else {
		setcookie ("limit".$id,"yes",time()+43200, "/");

		if ($action == 'up') {
			$query = "UPDATE `status` SET `rating` = `rating` + 1 WHERE `id` = $id";
		}
		elseif ($action == 'down') {
			$query = "UPDATE `status` SET `rating` = `rating` - 1 WHERE `id` = $id";
		}  

		$result = mysql_query($query);
		if ($result)
		{ 
			echo $status['rating'];		
		}

	}

при таких изменениях когда я нажимаю на рейтинг, браузер думает секунд 3-5, потом перезагружает страницу и только потом меняет рейтинг. И еще.. думаю потом будут еще проблемы с куками)... но сейчас не об этом.

Yarik Voronov · August 26, 2008

2 Джин. А где код самого sendRequest() и getRequest() ??

Джин · August 26, 2008

забыл) вот еще файл есть ajax.js

 function createHttpRequest() {
var httpRequest;
var browser = navigator.appName;

if (browser == "Microsoft Internet Explorer") {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
httpRequest = new XMLHttpRequest();
}

return httpRequest;
}

function sendRequest(file, _resultId, getRequestProc) {
resultId = _resultId;
document.getElementById(resultId).innerHTML = '--';
httpRequest.open('get', file);
httpRequest.onreadystatechange = getRequestProc;
httpRequest.send(null);
}

function getRequest() {
if (httpRequest.readyState == 4) {
document.getElementById(resultId).innerHTML = httpRequest.responseText;
}
}

var httpRequest = createHttpRequest();
var resultId = '';

Victor Ananiev · August 26, 2008

httpRequest.onreadystatechange = getRequestProc; - заметьте - имя функции getRequestProc

а у вас имя этой функции чуть ниже getRequest. Надо сделать так чтобы имена эти совпадали).

карочевот так:

function createHttpRequest() {
var httpRequest;
var browser = navigator.appName;

if (browser == "Microsoft Internet Explorer") {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
httpRequest = new XMLHttpRequest();
}

return httpRequest;
}

function sendRequest(file, _resultId, getRequestProc) {
resultId = _resultId;
document.getElementById(resultId).innerHTML = '--';
httpRequest.open('get', file);
httpRequest.onreadystatechange = getRequestProc;
httpRequest.send(null);
}

function getRequestProc() {
if (httpRequest.readyState == 4) {
document.getElementById(resultId).innerHTML = httpRequest.responseText;
}
}

var httpRequest = createHttpRequest();
var resultId = '';

Yarik Voronov · August 26, 2008

Скорее всего файла с именем например "/rating.php?action=up&id=1333" не существует. Ответ сервера 404.

<!-- onClick="java script:..." пишется слитно. а то какой-то глюк, по крайней мере у меня :) -->
<a href="" onClick="java script:sendRequest(['/rating.php','action=up&id=<?=$status['id']?>'], 'result<?=$status['id']?>', getRequest);" title="Нравится">+</a>
<b id="result<?=$status['id']?>"><? include "./rating.php";?></b> // вывод рейтинга
....
function sendRequest(param, _resultId, getRequestProc) {
   resultId = _resultId;
   document.getElementById(resultId).innerHTML = '--';
   httpRequest.open('GET', param[0], true); /*true - асинхронный запрос. для синхронного запроса (false) алгоритм несколько проще*/
   httpRequest.onreadystatechange = getRequestProc;
   httpRequest.send(param[1]);
}

function getRequest() {
   if (httpRequest.readyState == 4)
		if  (httpRequest.responseText &&  httpRequest.status == 200)
			document.getElementById(resultId).innerHTML = httpRequest.responseText;
}

Джин · August 26, 2008

не работает. вообще не работает. страница перезагружается, рейтинг не меняется.

я думаю что я вообще не правильно там все сделал)

посмотрите, пожалуйста, мой первый пост, правильно я там все заменил или вообще не так?

Yarik Voronov, щас посмотрю

Edited August 26, 2008 by Джин

Victor Ananiev · August 26, 2008

Ни то ни другое не работает?

Есть:

<a href="" onClick="java script:sendRequest('/rating.php?action=up&id=<?=$status['id']?>', 'result<?=$status['id']?>', getRequest);" title="Нравится">+</a>
<b id="result<?=$status['id']?>"><? include "./rating.php";?></b> // вывод рейтинга

должно быть:

<a href="" onClick="java script:sendRequest('/rating.php?action=up&id=<? echo($status['id']); ?>', 'result=<? echo($status['id']); ?>', getRequest);" title="Нравится">+</a>
<b id="result=<? echo($status['id']); ?>"><? include "./rating.php";?></b> // вывод рейтинга

Ты не пишешь функцию вывода.

Edited August 26, 2008 by Vindex10

Yarik Voronov · August 26, 2008

Ты не пишешь функцию вывода.

ага, точно. я что-то не видел в РНР запроса типа SELECT и где присваивается $status['rating']. Запрос типа UPDATE возвращает только true/false.

в функции getRequest () добавте alert(httpRequest.responseText); и посмотрите ответ сервера

Джин · August 26, 2008

<?=$aaa;?> одно и тоже что <? echo($aaa); ?>

изменял и так и так, всегда перезагружает страницу и рейтинг не меняет... щас еще ченить там попробую изменить. А файл rating.php я правильно изменил? или нет?

ага, точно. я что-то не видел в РНР запроса типа SELECT и где присваивается $status['rating']. Запрос типа UPDATE возвращает только true/false.

зачем SELECT то? я ведь изменяю (обновляю) рейтинг, а для этого на сколько мне известно используется UPDATE. Да и зачем искать ошибки в php коде исходника, когда без аякса он работает отлично?

Edited August 26, 2008 by Джин

Victor Ananiev · August 26, 2008

Если чесно не знал что echo() сокращаетсо до =Переменная. Ща проверю)

Yarik Voronov · August 26, 2008

Млин, совсем забыл <a href="#" onclick="sendRequest(); return false;"></a> из самого простого

Dimitry Wolotko · August 26, 2008

Если чесно не знал что echo() сокращаетсо до =Переменная. Ща проверю)

http://php.ru/manual/function.echo.html

I have <?=$foo?> foo.

Этот сокращенный синтаксис допустим только когда директива конфигурации short_open_tag включена.

В общем, к примеру, плагин на популярную CMS с таким сокращением лучше не писать.

Victor Ananiev · August 26, 2008

Буду знать)

Yarik Voronov · August 26, 2008

2 Джин и всем. Извиняюсь в посте №5 допущена мною ошибка чтобы отправить запрос методом GET не надо разбивать строку на файл и параметры запроса.

зачем SELECT то? я ведь изменяю (обновляю) рейтинг, а для этого на сколько мне известно используется UPDATE. Да и зачем искать ошибки в php коде исходника, когда без аякса он работает отлично?

Да все правильно UPDATE (и он возвращает true/false). Так как запрос происходит без обновления страницы то где то значение $status['rating'], которое должно быть выведено методом inneHTML();? Если оно все-же было получено в скрипте ранее, то тогда нет вопросов, главное чтобы $status['rating'] не было undefined.

Маленький тест-пример

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Тест ajaxa</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<script language="javascript" type="text/javascript">
		function sendRequest (URL, resultId) {
			var request = new XMLHttpRequest(); // осла нету.
			request.open('GET', URL, false); //синхронно
			request.send(null);
			if (request.status == 200) {
				alert(request.responseText);
				document.getElementById(resultId).innerHTML = request.responseText;
			}
		}
	</script>
	<a href="#" onclick="sendRequest('./rating.php?action=up&id=12345', 'rating12345'); return false;">Поднять</a>
	<b id="rating12345"></b>
</body>
</html>

rating.php

<?php
	var_dump ($_GET);
?>

Yarik Voronov · August 26, 2008

Тот же самый тест-пример в контексте первоначального вопроса. Файл raiting.php такой же

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Тест ajax</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<script language="javascript" type="text/javascript">

		var resultId, request;
		/*
		/* глобальная видимость переменной request и resultId,
		/* что может привести к неожиданным результатам
		/* при одновременных нескольких асинхронных запросах, случайно
		/* выполненных в одно и то же время.
		*/

		function makeHttpRequest () {
			var request = false; // локальная видимость переменной
			if (window.XMLHttpRequest) { // Mozilla, Safari, Opera 8+, ...
				 request = new XMLHttpRequest();
			} else if (window.ActiveXObject) { // IE
				 try {
					 request = new ActiveXObject("Msxml2.XMLHTTP");
				 } catch (e) {
					 try {
						  request = new ActiveXObject("Microsoft.XMLHTTP");
					 } catch (e) {}
				 }
			}
			return request;
		}

		function getRequest() {
			if (request.readyState == 4)
				 if  (request.responseText &&  request.status == 200) {
					 alert(request.responseText);
					 document.getElementById(resultId).innerHTML = request.responseText;
				 }
		 }

		function sendRequest (URL, _resultId, getRequestProc) {
			resultId = _resultId;
			request = makeHttpRequest(); //глобальная видимость переменной
			if (!request) return;
			request.open('GET', URL, true); //асинхронно
			request.onreadystatechange = getRequestProc;
			request.send(null);
		}
	</script>
	<a href="#" onclick="sendRequest('./rating.php?action=up&id=12345', 'rating12345', getRequest); return false;">Поднять</a>
	<b id="rating12345"></b>
</body>
</html>

Джин · August 26, 2008

тест-пример №1 работает отлично в опере. в ие не работает.

второй тест везде хорошо работает

попытался это вставить в свой код. все точно так же.... но почему то у меня перезагружается страница О_о

в общем, теперь у меня есть код который мне нужен был, теперь надо свой скрипт переделывать как то....

Yarik Voronov, Vindex10 большое спасибо за помощь

Edited August 26, 2008 by Джин

Yarik Voronov · August 26, 2008

Замените

<a href="#" onclick="sendRequest('./rating.php?action=up&id=12345', 'rating12345', getRequest); return false;">Поднять</a>

на <img src="/my.png" onclick="sendRequest('./rating.php?action=up&id=12345', 'rating12345', getRequest);" />

если и после этого страница перезагружается значит смотреть следует ответ сервера. если не перезагружается тогда следует останавливать дальнейшее распространение события при клике на <a> другим способом.

Но скорее всего просто не заполнен атрибут href тега а как приведено выше. и(или) не почищен кеш браузера

тест-пример №1 работает отлично в опере. в ие не работает.

var request = new XMLHttpRequest(); // осла нету. Переписать эту строчку кода сообразно второго примера надо

Джин · August 26, 2008

))))))))))))))))))))))))) ура заработало)))) на упрощеном варианте. тем более этот способ мне больше подходит

я уж думал надо весь сайт с нуля переделывать гыгы)) щас попробую на сам сайт это поставить.

Джин · August 26, 2008

после долгих мучений наконец то все заработало

<? if (!isset($_COOKIE['limit'.$status['id']])) {?> 
<img src="/img/p.gif" onclick="sendRequest('./rating.php?action=up&id=<?=$status['id']?>', 'rating<?=$status['rating']?>', getRequest);"/>
<? } else { ?><img src="./img/p1.gif"/><? }?>

<b id="rating<?=$status['rating']?>"><?=$status['rating']?></b>

<? if (!isset($_COOKIE['limit'.$status['id']])) {?> 
<img src="/img/m.gif" onclick="sendRequest('./rating.php?action=down&id=<?=$status['id']?>', 'rating<?=$status['rating']?>', getRequest);" />
<? } else { ?><img src="./img/m1.gif"/><? }?>

rating.php

$id = $_GET['id'];
	$action = $_GET['action'];

	if (isset($id) || isset($action))
	{
		setcookie ("limit".$id,"yes",time()+43200, "/");

		if ($action == 'up') {
			$query = "UPDATE `status` SET `rating` = `rating` + 1 WHERE `id` =".$id;
		}
		elseif ($action == 'down') {
			$query = "UPDATE `status` SET `rating` = `rating` - 1 WHERE `id` =".$id;
		}  

		$result = mysql_query($query);
		if ($result)
		{ 

			$stat = mysql_query("SELECT * FROM status WHERE id=".$id.";");
			if($stat)
			{
					  $status = mysql_fetch_array($stat);
					  echo $status['rating'];
			}
			else
			{
					  echo "<p><b>Error: ".mysql_error()."</b></p>";
					  exit();
			}		

		}

	}

все работает хорошо, только куки не ставятся как это можно исправить?

Edited August 26, 2008 by Джин

Yarik Voronov · August 26, 2008

все работает хорошо, только куки не ставятся как это можно исправить?

Конкретнее в каком браузере не ставяться? в FF3 например ставяться. проверено на тест-примере.

<?php
   $id="12345";
   setcookie ("limit".$id,"yes",time()+43200, "/");
   var_dump ($_GET);
?>

Opera 9.52 тоже принимает

Джин · August 26, 2008

мда... я ошибся. куки ставятся. но не работает условие (которое раньше работало)

<? if (!isset($_COOKIE['limit'.$status['id']])) {?>

Yarik Voronov · August 26, 2008

оно-то как раз работает... но только при загрузке / обновлении страницы. соответственно при клике надо сразу что-то делать с кнопками. например перезаписывать onclick .onclick = function() {return false}; менять class и т.п.

Джин · August 26, 2008

для меня это слишком сложно %) (я js воообще не понимаю....) можно пример?

Джин · August 26, 2008

сделал так, чтобы пользователь не мог 2 раза изменять рейтинг. но картинка не меняется пока не перезагрузишь страницу

<?php
	include "./tmp/config.php";

	$id = $_GET['id'];
	$action = $_GET['action'];

if (!isset($_COOKIE['limit'.$id])) {	
	if (isset($id) || isset($action))
	{
		setcookie ("limit".$id,"yes",time()+43200, "/");

		if ($action == 'up') {
			$query = "UPDATE `status` SET `rating` = `rating` + 1 WHERE `id` =".$id;
		}
		elseif ($action == 'down') {
			$query = "UPDATE `status` SET `rating` = `rating` - 1 WHERE `id` =".$id;
		}  

		$result = mysql_query($query);
		if ($result)
		{ 

			$stat = mysql_query("SELECT * FROM status WHERE id=".$id.";");
			if($stat)
			{
					  $status = mysql_fetch_array($stat);
					  echo $status['rating'];
			}
			else
			{
					  echo "<p><b>Error: ".mysql_error()."</b></p>";
					  exit();
			}		

		}

	}
}
?>

Джин · August 30, 2008

тема все еще актуальна

Sign In

Рейтинг

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information