将 AJAX 应用于评分系统

Question

所以我创建了这个评级系统，将数字 1-5 发送到文本文件，这取决于用户点击的星号。 在同一页面上，我们有一个计数器，用于计算投票数和所有投票的总数。

进度很好，但我想加强一些。

这是我的代码：

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

我对这个 php 有点陌生，但是是否可以执行 AJAX 请求，这样我们就不必重新加载页面来获取更新的计数？

我需要帮助的是创建一个 AJAX 调用，这样当用户单击星号时，页面将调用文本文件中的数据，而无需重新加载整个页面。

我想我发布了所有必要的信息，如果没有，请告诉我，我会编辑并尝试为您提供信息。

Answer 1

首先，我宁愿将此信息存储在数据库中而不是文本文件中，但概念是相同的。

1.) 创建一个新的 PHP，它读取文本文件并获取新的“Count”投票或“Score”任何您想要发回的信息。为了简单的使用，我会回显这个值。

2.) 添加更多 Javascript 以在我们添加用户数后获取此值。

下面的示例很好地概述了这个概念（来自 W3Schools - http://www.w3schools.com/php/php_ajax_database.asp）。此示例将使用 'txtHint' 的 css 'ID' 替换返回值到网页中。这个特定的示例还获取整个页面并将其加载到此 ID 中，如果您只是将值回显到浏览器中，这将很好。

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

这应该可以帮助你，如果你很难让它工作回发你的代码并可以从中进行调试。