По крайней мере, вы хорошо начали, все еще есть ошибки. Прежде всего, есть несколько основных принципов, к которым вы можете привыкнуть:
1) How to create a click event
Прежде всего, я вставил «2» в качестве ссылки.
<a class="myButtonLink" href="2">Vote Up!</a>
EDIT: на всякий случай, если JS отключен, это будет лучший вариант:
<a class="myButtonLink" href="voteup.php?id=2" id="2">Vote Up!</a>
Тогда JS:
$('.myButtonLink').click(function(e) {
e.preventDefault();
alert('the button has been clicked!');
});
e представляет событие, поэтому первое, что мы делаем после отправки, это отмена действия по умолчанию (перенаправление на «2»). Затем мы предупреждаем, что кнопка была нажата. Если это работает, мы можем перейти к следующему шагу.
2) Getting the ID value from the clicked link.
Внутри функции щелчка мы можем использовать $(this), это представление элемента, по которому щелкнули. jQuery предоставляет нам набор функций для получения атрибутов из данного элемента, это именно то, что нам нужно.
$('.myButtonLink').click(function(e) {
e.preventDefault();
var comment_id = $(this).attr('id');
alert('We are upvoting comment with ID ' + comment_id);
});
Когда все идет хорошо, это должно предупредить «Мы голосуем за комментарий с ID 2». Итак, перейдем к следующему шагу!
3) Sending the Request
Это может быть более сложный шаг, если вы только начинаете работать с ajax / jquery. Вы должны знать, что данные, которые вы отправляете, могут быть строкой URL (param = foo & bar = test) или массивом javascript. В большинстве случаев вы будете работать со строкой URL, потому что вы запрашиваете файл. Также убедитесь, что вы используете относительные ссылки («ajax / upVote.php», а не «http://www.mysite.com/ajax/upVote.php').». Вот небольшой тестовый код:
$('.myButtonLink').click(function(e) {
e.preventDefault();
var comment_id = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'thumbs.php',
data: 'comment_id=' + comment_id,
success: function(msg) { alert(msg); }
});
dataType определяется автоматически, например, вы можете выбрать между ответом JSON (который может быть массивом с состоянием и ответом сообщения) или просто простым текстом. Давайте будем простыми и начнем с простого текста.
Этот скрипт выполняет вызов thumbs.php и отправку значения $ _POST ($ _POST ['comment_id'] = 2) вместе с этим запросом. Теперь на thumbs.php вы можете выполнить PHP-часть:
1) checking if the comment_id is valid
2) upvoting the comment
3) print the current amount of votes back to the screen (in thumbs.php)
Если вы напечатаете количество голосов обратно на экран, последний скрипт, который я вам дал, предупредит окно сообщения, содержащее количество голосов.
4) Returning an array of data with JSON
Чтобы получить правильный ответ на вашем экране, вы можете рассмотреть возможность отправки массива вроде:
$arr = array(
'result' => 'success', // or 'error'
'msg' => 'Error messag' // or: the amount of votes
)
Затем вы можете закодировать это с помощью функции php json_encode($arr). Тогда вы сможете получить более достойный ответ со своим сценарием, используя это:
$('.myButtonLink').click(function(e) {
e.preventDefault();
var comment_id = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'thumbs.php',
data: 'comment_id=' + comment_id,
success: function(data) {
if(data.result == "error") {
alert(data.msg);
} else {
alert('Your vote has been counted');
$('#numvotes').html(data.msg);
}
}
});
Как вы можете видеть, мы используем (данные) вместо (msg), так как мы отправляем обратно набор данных. Массив в PHP ($ arr ['result']) можно прочитать как data.result. Сначала мы проверяем, каков результат (ошибка или успех), если это ошибка, мы предупреждаем отправленное сообщение (неправильное соединение с БД, неправильный идентификатор комментария, невозможность подсчета голосов и т. Д. И т. Д.) О результате В случае успеха мы предупреждаем, что голос подсчитан и помещаем (обновленное) число голосов в элемент div / span / other с идентификатором numvotes.
Надеюсь, это было полезно; -)
// edit: я заметил некоторые ошибки с тегами кода. Исправлена первая часть «руководства».