Aplicando Ajax al sistema de calificación -- javascript campo con php campo con jquery campo con html campo con ajax camp Relacionados El problema

Applying AJAX to rating system


0
vote

problema

Español

Por lo tanto, he creado este sistema de calificación que envía el número 1-5 a un archivo de texto, depiendo en qué estrella encendió el usuario. En la misma página tenemos un mostrador que cuenta el número de votos y la cantidad total de todos los votos.

El progreso funciona bien, pero quiero encubrirlo un poco.

Aquí está mi código:

  <form name="Star" id="Star">         <div id="rating-area" class="shadow">         <img src="star-icon.png" id="thumb1" data-value="1" />     <img src="star-icon.png" id="thumb2" data-value="2" />     <img src="star-icon.png" id="thumb3" data-value="3" />     <img src="star-icon.png" id="thumb4" data-value="4" />     <img src="star-icon.png" id="thumb5" data-value="5" />      </div>   </form>    <script>      jQuery('div#rating-area img').click(function(e){         var val = jQuery(this).data('value') ;         console.log(val) ;         jQuery.post('post.php',{ Star : val },function(data,status){             console.log('data:'+data+'/status'+status) ;         }) ;     }) ;  </script>    <?php      $file = file("textfile.txt");     $textfil = file_get_contents("textfile.txt");     $textfill = str_split($textfil);       echo "Number of votes in file: " . count($textfill) . "<br>";     $sum = 0;      foreach ($textfill as $vote) {         $sum = $sum + intval($vote);     }     echo "Total: " . $sum; ?>   

Soy un poco nuevo en este PHP, pero ¿es posible realizar una solicitud AJAX para que no tengamos que volver a cargar la página para obtener los números de conteo actualizados?

con lo que necesito ayuda es crear una llamada AJAX, así que cuando el usuario enciende una estrella, la página solicitará datos del archivo de texto sin hacerlo en la página completa.

Creo que publiqué toda la información de Necasssary, si no, dígame y editaré e intentaré darle la información.

Original en ingles

So I've create this rating system that sends number 1-5 to a textfile, depening on which star the user clicked on. At the same page we have a counter who counts number of votes, and the total amount of all votes.

The progress works fine, but I want to enchance it some.

Here is my code:

<form name="Star" id="Star">         <div id="rating-area" class="shadow">         <img src="star-icon.png" id="thumb1" data-value="1" />     <img src="star-icon.png" id="thumb2" data-value="2" />     <img src="star-icon.png" id="thumb3" data-value="3" />     <img src="star-icon.png" id="thumb4" data-value="4" />     <img src="star-icon.png" id="thumb5" data-value="5" />      </div>   </form>    <script>      jQuery('div#rating-area img').click(function(e){         var val = jQuery(this).data('value') ;         console.log(val) ;         jQuery.post('post.php',{ Star : val },function(data,status){             console.log('data:'+data+'/status'+status) ;         }) ;     }) ;  </script>    <?php      $file = file("textfile.txt");     $textfil = file_get_contents("textfile.txt");     $textfill = str_split($textfil);       echo "Number of votes in file: " . count($textfill) . "<br>";     $sum = 0;      foreach ($textfill as $vote) {         $sum = $sum + intval($vote);     }     echo "Total: " . $sum; ?> 

Im kind of new to this php, but is it possible to do an AJAX request so that we don't have to reload the page to get the updated count numbers?

What I need help with is to create an AJAX call so when the user onclick a star, the page will call for data from the textfile without realoading the whole page.

I think I posted all the necassary information, if not, please tell me and I will edit and try to give you the information.

              

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

En primer lugar, prefiero almacenar esta información en la base de datos que un archivo de texto, pero el concepto es el mismo.

1.) Cree un nuevo PHP que lea el archivo de texto y obtenga el nuevo 'CUENTO' de votos o 'Puntuación', independientemente de la información que desea enviar. Para uso sencillo, simplemente eco de este valor.

2.) Agregue un poco más de JavaScript para ir a buscar este valor después de haber agregado los usuarios.

El siguiente ejemplo ofrece una buena visión general del concepto (de W3SCHOOLS - http: // www. w3schools.com/php/php_ajax_database.asp ). Este ejemplo tomaría y luego reemplazaría el valor de retorno en la página web con la ID de CSS "de 'TXTHINT'. Este ejemplo SPECFIC también obtiene toda la página y lo carga en esta ID, esto estará bien si solo está echando el vale a su navegador.

  <script> function showUser(str) { if (str=="")   {   document.getElementById("txtHint").innerHTML="";   return;   }  if (window.XMLHttpRequest)   {// code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest();   } else   {// code for IE6, IE5   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   } xmlhttp.onreadystatechange=function()   {   if (xmlhttp.readyState==4 && xmlhttp.status==200)     {     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;     }   } xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); } </script>   

Esto debería ayudarlo, si lucha, conseguir que trabaje, publique su código y puede depurar de eso.

 

Firstly I would rather store this information in database than a text file but the concept is the same.

1.) Create a new PHP that reads the text file and gets the new 'Count' of votes or 'Score' whatever information you want to send back. For simple usage I would just echo this value.

2.) Add some more Javascript to go fetch this value after we have added the users count.

The example below gives a good overview of the concept (From W3Schools - http://www.w3schools.com/php/php_ajax_database.asp). This example would take and then replace the return value into the webpage with the css 'ID' of 'txtHint'. This specfic example also gets the entire page and loads it into this ID, this will be fine if you are only echo'ing the vale to your browser.

<script> function showUser(str) { if (str=="")   {   document.getElementById("txtHint").innerHTML="";   return;   }  if (window.XMLHttpRequest)   {// code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest();   } else   {// code for IE6, IE5   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   } xmlhttp.onreadystatechange=function()   {   if (xmlhttp.readyState==4 && xmlhttp.status==200)     {     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;     }   } xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); } </script> 

This should help you out, if you struggle getting it to work post back your code and can debug on from that.

 
 
         
         

Relacionados problema

0  Realización de jquery show / ocultar en contenido creado dinámicamente  ( Performing jquery show hide on dynamically created content ) 
Tengo una página que creé con jQuery, y en esta página es una tabla donde las filas de la tabla tienen nombres de clase que los identifican como un cierto col...

167  Modificar la URL de la barra de direcciones en la aplicación AJAX para que coincida con el estado actual  ( Modify address bar url in ajax app to match current state ) 
Estoy escribiendo una aplicación AJAX, pero a medida que el usuario se mueve a través de la aplicación, me gustaría que la URL en la barra de direcciones se a...

13  Estado de seguimiento utilizando ASP.NET AJAX / ILEALBACKEVENTHANDHANDERLLER  ( Tracking state using asp net ajax icallbackeventhandler ) 
Tengo un problema con el mantenimiento de estado en una página ASP.NET AJAX. Versión corta: Necesito alguna forma de actualizar la página ViewState después de...

1  ASP.NET AJAX, Cuelga a veces  ( Asp net ajax hangs sometimes ) 
Yo uso ASP.NET AJAX en mi proyecto. y utilizando sesión para la gestión del estado. En algún pedazo de código, tengo algunos ModalPop, que contienen UCS y h...

0  $ .AJAX y WEBMETHOD / PAGEMETHODS  ( Ajax and webmethod pagemethods ) 
Estoy tratando de llamar a un Pagemethod que no tiene parámetros, y parece que no puedo hacerlo funcionando. Si tengo un solo parámetro en el Pagemethod, fu...

20  Manera fácil de Ajax Webcontrols  ( Easy way to ajax webcontrols ) 
Tengo una aplicación web que estoy tratando de optimizar. Algunos de los controles están ocultos en estilo de diálogo DIVs . Entonces, me gustaría que se car...

1  LightBox no funciona en AJAX.UPDATER DIV (prototipo)  ( Lightbox not working in ajax updater div prototype ) 
Estoy usando un Ajax.Updater Llame para producir una sola lista de listas de alquiler en un div. Un menú desplegable de todos los listados de alquiler comie...

0  AJAXTOOL KIT POPUP EN USERETROL  ( Ajaxtool kit popup in usercontrol ) 
Tengo página en la que usé el USERCONTROL en el control del usuario, uso una ventana emergente del kit AJAXTOLL para cargar un div en el control de usuario, f...

11  Control deslizante jquery - Función de llamada después de la diapositiva  ( Jquery slider call function after slide ) 
Tengo una calada de jQuery que estoy usando para establecer la puntuación en una aplicación web. Yo orignally lo tenía para que el usuario haga clic en un bot...

2  Ajaxform en jQuery  ( Ajaxform in jquery ) 
Estoy usando AjaxForm. Ahora he encontrado un problema. Mi idea es cuando el usuario ingresa al nombre de usuario, si es un nombre de usuario incorrecto, debe...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos