Buscando orientación sobre sintaxis para implementar el proyecto AJAX

Question

Estoy asumiendo mi primer proyecto AJAX y conceptualmente tengo todo planeado en su mayor parte, pero me estoy frenando debido a mi falta de conocimiento sintáctico.Creo que también podría estar un poco fuera de lugar con mi lógica de estructura/función.

Estoy buscando alguna orientación, aunque sea una referencia a tutoriales o correcciones de lo que me falta o lo que estoy pasando por alto.

perfil.php:esta es la página que tiene el ícono del pulgar real para hacer clic y el $.post función:

Aquí está la estructura del pulgar.

Cuando se hace clic en el pulgar, ¿tengo que enviar la identificación del comentario?Sé que necesito calcular el hecho de que se hizo clic de alguna manera y enviarlo al archivo $.En el área de publicación en la parte inferior de esta página, también necesito colocar algún tipo de variable php en el div del contador de pulgar para incrementar los números cuando el archivo $.La publicación confirma que se hizo clic.

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

Aquí está el $.post función

¿A esto se le debe enviar la identificación del comentario?Pero ciertamente se debe enviar un registro del enlace en el que se hizo clic y de alguna manera enviarlo a mi página PHP que se comunica con la base de datos.

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

pulgares.php:es la página en la que se envía la solicitud de incremento cuando se hace clic en el pulgar y luego, a su vez, le dice a la base de datos que almacene un clic, realmente no tengo nada en esta página todavía.Pero supongo que se le pasará un registro del clic desde vía $.post función desde la otra página que sintácticamente no tengo idea de cómo funcionaría y luego, mediante una consulta de inserción, disparará ese registro a la base de datos.

Esto es lo que tiene la tabla en la base de datos.

Tengo tres filas:a id que se incrementa automáticamente.a comment_id para que sepa qué comentario le está dando "me gusta" y finalmente un likes para realizar un seguimiento del número de pulgares hacia arriba.

Answer 1

Al menos has empezado bien, todavía hay algunos errores.En primer lugar, hay algunos principios básicos a los que quizás quieras acostumbrarte:

1) How to create a click event

En primer lugar, inserté '2' como href en el botón.

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

EDIT:En caso de que JS esté deshabilitado, esta sería una mejor opción:

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

Entonces el JS:

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

El e representa el evento, por lo que lo primero que hacemos después del envío es cancelar la acción predeterminada (redireccionando a '2').Entonces alertamos que se hizo clic en el botón.Si esto funciona, podemos pasar al siguiente paso.

2) Getting the ID value from the clicked link.

Dentro de la función de clic, podemos usar $(this), es una representación del elemento en el que se hizo clic.jQuery nos proporciona un conjunto de funciones para obtener atributos de un elemento determinado, esto es exactamente lo que necesitamos.

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

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

Cuando todo va bien, esto debería alertar "Estamos votando a favor del comentario con ID 2".Entonces, ¡al siguiente paso!

3) Sending the Request

Este podría ser el paso más difícil si recién estás comenzando con ajax/jquery.Lo que debes saber es que los datos que envías pueden ser una cadena de URL (param=foo&bar=test) o una matriz de JavaScript.En la mayoría de los casos, trabajará con una cadena de URL porque está solicitando un archivo.También asegúrese de utilizar enlaces relativos ('ajax/upVote.php' y no 'http://www.mysite.com/ajax/upVote.php').Así que aquí hay un pequeño código de prueba:

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

el tipo de datos se detecta automáticamente; por ejemplo, puede elegir entre una respuesta JSON (que puede ser una matriz con un estado y una respuesta de mensaje) o simplemente texto sin formato.Mantengámoslo simple y comencemos con texto sin formato.

Lo que hace este script es llamar a thumbs.php y enviar un valor $_POST ($_POST['comment_id'] = 2) junto con esta solicitud.En thumbs.php ahora puedes hacer la parte de PHP que es:

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)

Si imprime el número de votos en la pantalla, el último script que le di alertará a un cuadro de mensaje que contiene el número de votos.

4) Returning an array of data with JSON

Para obtener una respuesta adecuada en su pantalla, podría considerar enviar una matriz como:

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

Luego puedes codificar esto usando la función php. json_encode($arr).Entonces podrás obtener una respuesta más decente con tu script usando esto:

$('.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 puede ver, estamos usando (datos) en lugar de (msg) ya que estamos devolviendo un conjunto de datos.La matriz en PHP ($arr['result']) se puede leer como data.result.Al principio, verificamos cuál es el resultado (error o éxito), si es un error, alertamos el mensaje enviado (conexión de base de datos incorrecta, ID de comentario incorrecto, no se pueden contar los votos, etc.etc.) del resultado es exitoso, alertamos que el voto ha sido contado y colocamos el número (actualizado) de votos dentro de un elemento div/span/otro con el ID 'numvotes'.

Espero que esto haya sido útil ;-)

//editar:Noté algunos errores con las etiquetas de código.Se corrigió la primera parte del 'manual'.