Procurando orientação de sintaxe sobre a implementação do projeto AJAX

Question

Estou assumindo meu primeiro projeto AJAX e conceitualmente tenho tudo mapeado na maior parte, mas estou sendo retido devido à minha falta de conhecimento sintaticamente.Acho que também posso estar um pouco errado com minha lógica de estrutura/função.

Estou procurando alguma orientação, ainda que referência a tutoriais ou quaisquer correções do que estou faltando ou negligenciando.

perfil.php:esta é a página que tem o ícone de polegar real para clicar e o $.post função:

Aqui está a estrutura do polegar.

Quando o polegar é clicado, preciso enviar o id do comentário?Eu sei que preciso calcular o fato de que ele foi clicado de alguma forma e enviar para o $.Na área de postagem na parte inferior desta página, também preciso colocar algum tipo de variável php no contador de polegar div para incrementar os números quando o $.A postagem confirma que foi clicado.

<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>

Aqui está o $.post função

Para isso deverá ser enviado o id do comentário?Mas certamente deveria ser enviado um registro do link do polegar sendo clicado e de alguma forma enviá-lo para minha página php que fala com o banco de dados.

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

polegares.php:é a página para a qual a solicitação de incremento é enviada quando o polegar é clicado e, por sua vez, diz ao banco de dados para armazenar um clique, ainda não tenho nada nesta página.Mas presumo que será passado um registro do clique via $.post função da outra página que sintaticamente não tenho idéia de como isso funcionaria e, em seguida, por meio da consulta de inserção, gravarei esse registro no banco de dados.

Aqui está o que a tabela no banco de dados tem

Eu tenho três linhas:a id que incrementos automáticos.a comment_id para que ele saiba qual comentário está sendo "curtido" e, finalmente, um likes para acompanhar o número de polegares para cima.

Answer 1

Pelo menos você começou bem, ainda existem alguns erros.Em primeiro lugar, existem alguns princípios básicos com os quais você pode querer se acostumar:

1) How to create a click event

Primeiro de tudo o botão, inseri '2' como href.

<a class="myButtonLink" href="2">Vote Up!</a>

EDIT:Caso o JS esteja desativado, esta seria uma opção melhor:

<a class="myButtonLink" href="voteup.php?id=2" id="2">Vote Up!</a>

Então o JS:

$('.myButtonLink').click(function(e) {
  e.preventDefault();
  alert('the button has been clicked!');
});

O e representa o evento, então a primeira coisa que fazemos após o envio é cancelar a ação padrão (redirecionando para '2').Então estamos alertando que o botão foi clicado.Se isso funcionar, podemos ir para a próxima etapa.

2) Getting the ID value from the clicked link.

Dentro da função click, podemos usar $(this), é uma representação do elemento clicado.jQuery nos fornece um conjunto de funções para obter atributos de um determinado elemento, é exatamente disso que precisamos.

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');
  alert('We are upvoting comment with ID ' + comment_id);
});

Quando tudo correr bem, isso deverá alertar 'Estamos votando positivamente no comentário com ID 2'.Então, vamos para a próxima etapa!

3) Sending the Request

Esta pode ser a etapa mais difícil se você está apenas começando com ajax/jquery.O que você deve saber é que os dados que você envia podem ser uma string de URL (param=foo&bar=test) ou um array javascript.Na maioria dos casos, você trabalhará com uma string de URL porque está solicitando um arquivo.Certifique-se também de usar links relativos ('ajax/upVote.php' e não 'http://www.mysite.com/ajax/upVote.php').Então aqui está um pequeno código de teste:

$('.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); }
});

o dataType é detectado automaticamente, você pode, por exemplo, escolher entre uma resposta JSON (que pode ser uma matriz com um status e uma resposta de mensagem) ou apenas texto simples.Vamos mantê-lo simples e usar texto simples para começar.

O que este script faz é chamar thumbs.php e enviar um valor $_POST ($_POST['comment_id'] = 2) junto com esta solicitação.Em thumbs.php agora você pode fazer a parte do PHP que é:

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)

Se você imprimir o número de votos de volta na tela, o último script que dei irá alertar uma caixa de mensagem contendo o número de votos.

4) Returning an array of data with JSON

Para obter uma resposta adequada na tela, considere enviar de volta um array como:

$arr = array(
  'result' => 'success', // or 'error'
  'msg' => 'Error messag' // or: the amount of votes
)

Então você pode codificar isso usando a função php json_encode($arr).Então você poderá obter uma resposta mais decente com seu script usando isto:

$('.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);
      }
    }
});

Como você pode ver, estamos usando (data) em vez de (msg), pois estamos enviando de volta um conjunto de dados.O array em PHP ($arr['result']) pode ser lido como data.result.A princípio estamos verificando qual é o resultado (erro ou sucesso), se for um erro alertamos a mensagem enviada (conexão de banco de dados errada, ID de comentário errado, não foi possível contar votos, etc.etc.) do resultado for sucesso alertamos que o voto foi contado e colocamos o número (atualizado) de votos dentro de um elemento div/span/outro com o ID 'numvotes'.

Espero que isso tenha sido útil ;-)

//editar:Notei alguns erros com as tags de código.Corrigida a primeira parte do 'manual'.