Ищу руководство по синтаксису для реализации проекта AJAX.

StackOverflow https://stackoverflow.com/questions/5981859

Вопрос

Я берусь за свой первый проект AJAX, и концептуально у меня по большей части все запланировано, но меня сдерживают из-за отсутствия синтаксических знаний.Я думаю, что я также могу немного ошибаться в своей логике структуры/функции.

Я ищу какие-то рекомендации, хотя бы ссылки на учебные пособия или любые исправления того, что мне не хватает или я упускаю из виду.

профиль.php:это страница, на которой есть настоящий значок большого пальца, на который нужно щелкнуть, и значок $.post функция:

Вот структура большого пальца.

При нажатии большого пальца мне нужно отправить идентификатор комментария?Я знаю, что мне нужно как-то вычислить тот факт, что по нему нажали, и отправить его в $.В области публикации внизу этой страницы мне также нужно поместить какую-то переменную php в div счетчика большого пальца, чтобы увеличивать числа, когда $.Сообщение подтверждает, что на него нажали.

<div id="thumb_holder">
    <div id="thumb_report">
        <a href="mailto:info@cysticlife.org">
            report
        </a>
    </div>
    <div id="thumb_counter">
        +1
    </div>
    <div id="thumb_thumb">

        <?php $comment_id = $result['id'];?>
        <a class="myButtonLink" href="<?php echo $comment_id; ?>"></a>

    </div>
</div>

Здесь $.post функция

Здесь должен быть отправлен идентификатор комментария?Но наверняка следует отправить запись о нажатии на ссылку большого пальца и каким-то образом отправить ее на мою php-страницу, которая обращается к базе данных.

<script>
$.ajax({
 type: 'POST',
 url:" http://www.cysticlife.org/thumbs.php,"
 data: <?php echo $comment_id; ?>,
 success: success
 dataType: dataType
});
</script>

большие пальцы.php:это страница, на которую отправляется запрос на увеличение при нажатии на большой палец, а затем, в свою очередь, сообщает базе данных о необходимости сохранить клик, на этой странице у меня пока ничего нет.Но я предполагаю, что ему будет передана запись клика через $.post функция с другой страницы, синтаксически я понятия не имею, как это будет работать, а затем с помощью запроса на вставку запишите эту запись в базу данных.

Вот что есть в таблице в БД

У меня есть три строки:а id это автоматически увеличивается.а comment_id поэтому он знает, какой комментарий лайкается, и, наконец, likes чтобы отслеживать количество лайков.

Это было полезно?

Решение

По крайней мере, вы сделали хороший старт, но есть еще некоторые ошибки.Прежде всего, есть несколько основных принципов, к которым вы, возможно, захотите привыкнуть:

1) How to create a click event

Прежде всего, я вставил «2» в качестве href.

<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);
});

Когда все пойдет хорошо, должно появиться предупреждение: «Мы голосуем за комментарий с идентификатором 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) вместе с этим запросом.В Thums.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);
      }
    }
});

Как вы можете видеть, мы используем (data) вместо (msg), поскольку отправляем обратно набор данных.Массив в PHP ($arr['result']) можно прочитать как data.result.Сначала мы проверяем, каков результат (ошибка или успех), если это ошибка, мы предупреждаем отправленное сообщение (неправильное соединение с БД, неверный идентификатор комментария, невозможность подсчета голосов и т. д.).и т. д.) Если результат успешен, мы предупреждаем, что голос был подсчитан, и помещаем (обновленное) количество голосов в элемент div/span/other с идентификатором «numvotes».

Надеюсь, это было полезно ;-)

//редактировать:Я заметил некоторые ошибки в тегах кода.Исправлена ​​первая часть «руководства».

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top