循环中PHP内部的AJAX问题

时间:2014-04-01 16:32:30

标签: php jquery html ajax while-loop

我正在使用PHP WHILE循环显示许多产品(每个产品都有一个id#)作为HTML列表,每个产品都可以评级。评级系统基于PHP AJAX JQUERY。当用户对产品进行评级并且AJAX返回值后实施js时,该值将显示在该产品项目中,然后显示所有产品项目。我希望它只显示被评级的产品项目。在这里缺少使用AJAX的特殊注意事项吗?

浏览器工具或页面上没有错误我可以看到。我已经在许多位置围绕循环移动了js文件,这是我提出的最佳配置。

我知道很多代码,但如果涉及到任何标签,我认为显示它很重要。

html start loop

    <div id="main" role="main">
      <ul>
        <?php       
    while  . . .
    ?>
        <li>
          <div id="products">
            <div data-storyidr="
    <?php echo $id; ?>" class="rateit"> </div>
            <div id="response<?php echo $id; ?>"> </div>
          </div>
          <div class="clear"></div>

JS

    <script type ="text/javascript">
      $('#products .rateit').bind('rated reset', function (e) {
        var ri = $(this);
        var value = ri.rateit('value');
        var storyidr = ri.data('storyidr');
        ri.rateit('readonly', true);
            $.ajax({
            url: 'rate.php',
            data: { storyidr: storyidr, value: value }, 
            type: 'POST',
            success: function (data) {
             $('#response<?php echo $id; ?>').append(data);
            },
            error: function (jxhr, msg, err) {
             $('#response<?php echo $id; ?>').append('<li style="color:red">' + msg + '</li>');
                      }
              });
      });
    </script> 

结束循环

          </li>
        <?php
    endwhile;
    mysqli_close($connection);
    ?>
      </ul>
    </div>

1 个答案:

答案 0 :(得分:0)

这里的问题是你通过PHP循环一遍又一遍地将函数绑定到页面上的每个#products .rateit元素。您应该只绑定一次,并使用已存储在每个元素上的数据来执行您的javascript逻辑。由于storyidr设置为与PHP中的$id相同,为什么不直接使用它?

以下代码应该在外面 PHP循环。

<script type ="text/javascript">
  $('#products .rateit').bind('rated reset', function (e) {
    var ri = $(this);
    var value = ri.rateit('value');
    var storyidr = ri.data('storyidr');
    ri.rateit('readonly', true);
        $.ajax({
        url: 'rate.php',
        data: { storyidr: storyidr, value: value }, 
        type: 'POST',
        success: function (data) {
         $('#response'+storyidr).append(data);
        },
        error: function (jxhr, msg, err) {
         $('#response'+storyidr).append('<li style="color:red">' + msg + '</li>');
                  }
          });
  });
</script>