Javascript AJAX在评级系统中的应用

因此，我创建了一个评级系统，它将数字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;
?>

jQuery（'div#评级区域img'）。单击（函数（e）{
var val=jQuery（this）.data（'value'）；
控制台日志（val）；
jQuery.post（'post.php'，{Star:val}，函数（数据，状态）{
console.log（'data:'+data+'/status'+status）；
}) ;
}) ;

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

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

---

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

首先，我宁愿将这些信息存储在数据库中而不是文本文件中，但概念是一样的

1.）创建一个新的PHP，它读取文本文件并获取新的“票数”或“分数”，无论您想发回什么信息。对于简单的用法，我只会回显这个值

2.）在添加用户数后，再添加一些Javascript以获取此值

下面的示例很好地概述了这个概念（来自W3Schools-）。此示例将获取返回值，然后将其替换为css“ID”为“txtHint”的网页。这个特定的示例还获取整个页面并将其加载到此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>

函数showUser（str）
{
如果（str==“”）
{
document.getElementById（“txtHint”）.innerHTML=“”；
返回；
} 
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“txtHint”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”、“getuser.php？q=“+str，true”）；
xmlhttp.send（）；
}

---

这应该会帮助你，如果你很难让它工作的话，请发回你的代码，然后再进行调试。

我对这一点完全陌生，所以我可能有点慢。但是我创建了一个新页面，并复制了从textfile.txt获取值的php代码。我正在为你发布的代码而挣扎。我不知道里面应该放些什么。我想应该是我的textfile.txt在getelementbyid的（）中？在xmttp.open（“GET”…）中，这里发生了什么？您是否创建了一个PHP文件来读取txt文件并提供答案并将其回送到页面？我创建了一个名为ajax.PHP的新文件，在其中粘贴了PHP计数代码。我不知道如何把它回复到主页上。它是“include”（“ajax.php”）；echo$sum吗？只需浏览并查看它是否显示在浏览器中。好的开始，这是在没有SQL DB会使事情变得困难的时候。您需要返回给定产品的单个数字计数或任何您正在评级的数字。因此实现

$ID=$\u GET['ID']

我们可以使用Get，因为它比Get快。然后在URL的末尾添加

？ID=1

。在txt文件中使用与产品或您的评级匹配的ID，然后只返回单个数字。（这部分使用MySQL会容易得多，我建议先学习MySQL，然后再将ajax/php添加到txt文件中），但要做到这一点。