Ajax + js(没有jquery)

时间:2015-02-13 16:07:36

标签: javascript jquery ajax

我在IE上遇到了麻烦。此代码在IE中不起作用,但在其他情况下它运行良好。我发现IE不能使用jQuery AJAX,所以它需要没有。也许有人知道这个

$(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);
        }
    });
});

2 个答案:

答案 0 :(得分:0)

由于您已经在使用jQuery,因此您应该使用它而不是vanilla DOM脚本。

而不是

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

尝试使用:

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

在这里工作:http://jsbin.com/zoyinoguri/1/edit?html,js,output

答案 1 :(得分:0)

这是一个没有支持IE8 +的jQuery的解决方案:

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;

致以最诚挚的问候,