Ajax + js (without jquery)

Ajax + js (without jquery)

本文关键字：jquery without js Ajax      更新时间：2023-10-30

我在IE中遇到了问题。这段代码在IE中不起作用，但在其他代码中效果很好。我发现IE不能与jQueryAJAX一起工作，所以它需要不使用。也许有人知道这个

$(document).ready(function () {
    $.ajax({
        url: 'http://api.randomuser.me/?results=11',
        dataType: 'text',
        success: function (result, textStatus, XMLHttpRequest) {
            console.log(result);
            //alert(result);
            var event = JSON.parse(result);
            var our_html = "<table 'border='0' cellpadding='0' cellspacing='0'>";
            our_html += "<tr><th style='width:52px;border-left:none;'>№</th><th>Имя Фамилия Отчество</th><th>Адрес</th><th>Фото</th><th style='width:180px;border-right: none;'>Действие</th></tr>";
            event.results.forEach(function (item, item_number) {
                var u = item.user;
                our_html += "<tr>";
                our_html += "<td style='width:52px;'>" + (parseInt(item_number) + 1) + "</td>";
                our_html += "<td class='usname'>" + u.name.title + "." + "<span>" + u.name.first + "</span>" + " " + "<span>" + u.name.last + "</span>" + "</td>";
                our_html += "<td class='usst'>" + "<span>" + u.location.city + "</span>" + ", " + u.location.street + "</td>";
                our_html += '<td style="width:146px;"><img style="max-width:60px; max-height:60px;border-radius: 30px;" src="' + u.picture.medium + '"></td>';
                our_html += '<td style="width:180px; border-right: solid 1px #e1e1e1;"><div class="more" onclick="alert("' + u.name.first + '")">Просмотреть</div></td>';
                our_html += "</tr>";
            });
            our_html += "</table>";
            document.getElementById("table-wrapper").innerHTML = our_html;
            //alert (event.results[0].user.name.title);  // Goper
            //$(".simple p").text(event.results[0].user.name.title);
        }
    });
});

这里有一个没有jQuery的解决方案，它支持IE8+：

var request = new XMLHttpRequest();
request.open('GET', 'http://api.randomuser.me/?results=11', true);
request.onreadystatechange = function() {
  if (this.readyState === 4) {
    if (this.status >= 200 && this.status < 400) {
      var resp = this.responseText;
      var yourEvent = JSON.parse(resp);
      //Do whatever you want with the yourEvent variable
    } else {
      //Debug error here!
      console.error("An error occurred");
    }
  }
};
request.send();
request = null;

致问候，

由于您已经在使用jQuery，因此应该使用它而不是普通的DOM脚本。

代替

document.getElementById("table-wrapper").innerHTML=our_html;

尝试使用：

$('#table-wrapper').html(our_html);

此处工作：http://jsbin.com/zoyinoguri/1/edit?html，js，输出

相关文章：