Question

我正在尝试创建一个小部件，该小部件显示我数据库中公司的平均评分。

将在放置javascript嵌入代码的任何位置显示小部件。

这是我的JS文件：

link-widget.js

var company = document.getElementById("widget").getAttribute("data-name");
var rating;

function widget(){
var xmlhttp = new XMLHttpRequest();   
 xmlhttp.open("GET", "link-widget.php?name="+company,true);
 xmlhttp.onreadystatechange = function () { 
  if(xmlhttp.readyState === 4 && xmlhttp.status === 200) { 
   rating = JSON.parse(xmlhttp.responseText);
  document.write('<a href="https://www.example.com/company/'+company+'">Average Rating '+rating+'/5</a>');
  }
 };
 xmlhttp.send();
}

window.onload = widget;

，用于显示窗口小部件的嵌入代码为：

<script id="widget" data-name="company" src="https://www.example.com/manage/link-widget.js" type="text/javascript"></script>

Javascript正确地从数据库中获取了数据，但是问题在于它使页面空白，并且空白页面上仅显示“ Average rating ..”，并且该页面反复重新加载。页面上的其他html内容未显示。

请帮助。我在哪里出错了？

Answer 1

Per MDN，您需要致电document.close()：

在不调用document.open（）的情况下写入已加载的文档将自动调用document.open。完成编写后，建议调用document.close（）告诉浏览器完成页面加载。

但是，您可能还需要考虑document.createElement()。

Answer 2

解决了问题！

var company = document.getElementById("widget").getAttribute("data-name");
var rating;

var xmlhttp = new XMLHttpRequest();   
 xmlhttp.open("GET", "link-widget.php?name="+company,true);
 xmlhttp.onreadystatechange = function () { 
  if(xmlhttp.readyState === 4 && xmlhttp.status === 200) { 
   rating = JSON.parse(xmlhttp.responseText);
    display(this);
    }
 };
 xmlhttp.send();

 function display(json){

     document.getElementById("avg").innerHTML =
     '<a href="https://www.example.com/company/'+company+'">Average Rating '+rating+'/5</a>'; 
 }

和

<script id="widget" data-name="company" src="widget.js" type="text/javascript"></script>
<p id="avg"></p>

XMLHttpRequest其他页面内容丢失

2 个答案: