XMLHttpRequest другое содержимое страницы отсутствует

Question

XMLHttpRequest другое содержимое страницы отсутствует

1

Я пытаюсь создать виджет, который отображает средний рейтинг компании из моей базы данных.

Виджет будет отображаться везде, где будет размещен код встраивания javascript.

Вот мой JS файл:

ссылка-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 правильно получает данные из базы данных, но проблема заключается в том, что он делает страницу пустой и показывает только "Средний рейтинг.." на пустой странице, и страница повторно перезагружается. Другое содержимое html на странице не отображается.

Пожалуйста помоги. Где я неправ?

Sohail Ahmed 11 авг. 2018, в 17:19

Источник

Теги:

javascript

2 ответа

Ещё вопросы

Sohail Ahmed · Answer 1 · 2018-08-11T14-08-00.000Z

Решила проблему!

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>

Targaryen · Answer 2 · 2018-08-11T12-19-00.000Z

За MDN вам нужно вызвать document.close():

Запись в документ, который уже загружен без вызова document.open(), автоматически вызовет document.open. После того, как вы закончите писать, рекомендуется вызвать document.close(), чтобы сообщить браузеру о завершении загрузки страницы.

Однако вы также можете рассмотреть document.createElement().