Question

我有ajax请求获取一些数据并返回我在页面上打印出来的html响应。问题在于，由于某些原因，html响应未打印，只有文本数据才会打印。我在浏览器控制台中检查了正确的响应。

以下是ajax功能：

function getRating(work_id, selectorToWriteTo)
{
     $.ajax({
        url: '/read/getRatingsForGivenWork',
        type: 'GET',
        dataType: 'html',
        async: true,
        data: { field1: work_id},
        success: function (data) {
            //your success code
            $(selectorToWriteTo).html(data);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Error: " + thrownError);
        }
     });
}

返回html数据的函数：

public function getRatingsForGivenWork()
{
     $ratings = $this->getModel ( 'read', 'getRatingsForGivenWork', $_GET['field1']);
     if($ratings !== null)
     {      
          print "<div class=\"ui small star rating\" data-rating=\"" . $ratings ."\" data-max-rating=\"5\">Leave rating</div>";
     }
     else
     {
          print 0;
     }

   }

我调用ajax函数的地方：

<div class="extra">
     <script>
          document.write(getRating(<?php echo $row['works.work_id']; ?>, '.extra'));
     </script>    
</div>

Chrome开发者工具中的响应：

enter image description here

Chrome控制台：

enter image description here

正确的回复又回来了，但它没有在页面上打印html。有谁知道这是为什么？

Answer 1

您可以尝试将ID设置为HTML div，然后将其作为选择器传递;并将函数调用保留在div之外。

<div class="extra" id="div1">
</div>

<script>
    getRating(<?php echo $row['works.work_id']; ?>, '#div1');
</script>

Answer 2

您是否看到您的AJAX请求是否正在返回任何数据？尝试打开Inspect Element窗口并转到Network。

尝试发送您的请求，看看有什么回应。

另外，你发送什么功能getRating(work_id, selectorToWriteTo)？

selectorWriteTo包含哪些内容？

Answer 3

为什么不尝试使用。加载用于加载html内容并将其显示为页面的一部分。可能这会对你有帮助。

 $(selectorToWriteTo).load(data);

Answer 4

我相信你在这里遇到了一个竞争条件问题，为了解决这个问题我有一些变化，首先，我看到你正在循环可能是来自SQL调用的响应吗？所以，你每次迭代都会触发一次js代码，并且你总是替换你的.extra div的html，这意味着你要从那里删除脚本标记（不应该是一个真正的问题，因为php代码在之前执行JS）但我建议如下：

首先，移动脚本：

<div class="extra"></div>
<script>
    document.write(getRating(<?php echo $row['works.work_id']; ?>, '.extra'));
</script>

我建议你将<div class="extra"></div>移到PHP循环之外（如果它在其中，否则它可以），所以你只得到一个div。并将脚本标记留在循环中。现在，每次你的ajax请求成功时你都会替换整个.extra html，所以最后一次出现的循环可能会在你的else语句中结束，因此print 0;。我还建议您打印其他内容而不是0，如<span>You cannot rate this</span>那样您会注意到最新情况。现在，为了不替换整个div html，请使用append：

$(selectorToWriteTo).append(data);

要检查的另一件事是类ui small star rating extra的CSS并验证它们是否正在显示，而不是display: none;或visibility: hidden;

Answer 5

深入挖掘后，我设法找出问题所在。这一切都归结为PHP在JavaScript之前加载。

在我的PHP循环中，我打印出数据库表中的每个项目。对于每个项目，我调用了ajax函数getRating(work_id, selectorToWriteTo)，以便打印出评级。

ajax函数的结果是输出以下元素：

<div class="ui small star rating" data-rating="3" data-max-rating="5">Leave rating</div>

此元素需要javascript初始化才能正常工作并显示。我将初始化文件包装在document.ready（）中，如下所示：

$( document ).ready(function() {
   $('.ui.small.rating').rating();
});

这意味着星级评级显然只会在文档准备好并完全加载后才会被初始化，这在我的情况下是在PHP代码执行之后，所以PHP在初始化之前输出了元素，这就是为什么没有正在展示。

解决此问题的一种方法是使用JavaScripts window.onload事件，以便在页面完全加载时初始化评级：

window.onload = function(event){
    event.stopPropagation(true);
    $('.ui.small.rating').rating();
}

现在输出元素，不太确定为什么，因为我必须更深入地查看onload事件。仍有一些不寻常的行为，在大多数项目上元素被打印得很好，但是当我再次重新加载页面几次时，它会从一些项目中丢失，完全随机的行为。

感谢大家的帮助。

<强>更新

我最近发现了一个更强大，更快速的解决方案。我只需将初始化包装在setTimeOut函数中：

window.onload = function(event){
    setTimeout(function(){
       event.stopPropagation(true);
       $('.ui.small.rating').rating('disable');
    }, 0);

Ajax请求不打印html响应

5 个答案: