Javascript Ajax脚本仅在Firefox中工作（不在Chrome、Safari、Edge等中工作）

这段代码在Firefox中运行良好，但在我测试过的所有其他浏览器中，如果this.readyState==4&&this.status==200，则会出现错误SyntaxError:JSON Parse error:Unexpected EOF。json字符串如下所示：

[{"ID":"1","token":"1234","name":"Test Satio","matno":"11111","reg_date":"2017-10-24 00:00:00","last_active":"2017-10-24 00:00:00","user_id":"25"},{"ID":"3","token":"2232434","name":"Test Satio 2","matno":"44444","reg_date":"2017-10-23 00:00:00","last_active":"0000-00-00 00:00:00","user_id":"25"},{"ID":"5","token":"32233","name":"Test Satio 3","matno":"12","reg_date":"0000-00-00 00:00:00","last_active":"0000-00-00 00:00:00","user_id":"25"}]

JS代码：

 $(document).ready(function postData() {
    var id = localStorage.getItem('user-id');
    var token = localStorage.getItem('user-token');
    var vars = "id=" + id + "&token=" + token;
    var hr = new XMLHttpRequest();
    var url = "../php/getUsers.php";

      hr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {  //in this line I get the error
            var data = JSON.parse(hr.responseText);

            for(var i=0;i<data.length;i++){

                    var templateData = {
                        name: data[i].name,
                        id: data[i].id

                    };
                  var id=templateData['id'];

                  $.get('templates/user.htm', (function (templateData) {
                     return function(templates) {
                        var template = $(templates).filter('#user-template').html();
                        $('#user-container').append(Mustache.render(template,    templateData));
                      }
                  })(templateData));

             }
        }
    }
    hr.open("POST", url, true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    hr.send(vars);
});

我需要做什么更改才能使此代码在所有浏览器中工作

---

谢谢，Lukas

我认为您不需要为每个用户发出用户模板请求，我认为您可以执行一次并保存它

我简化了您的代码，并将外部ajax更改为使用jquery

 $(document).ready(function postData() {

    $.post({
      url: "../php/getUsers.php",
      data: {
        id: localStorage.getItem('user-id'),
        token: localStorage.getItem('user-token')
      },
      dataType: 'JSON',
      success: function (data) {
        // now get the template
        $.get('templates/user.htm', function (templates) {
          var template = $(templates).filter('#user-template').html();
          // we have the template and userdata array
          data.map(function (el) {
            return {id: el.id, name: el.name};
          }).forEach(function (templateData) {
             $('#user-container').append(Mustache.render(template, templateData));
          });
        });
      }
    });

});

---

在发送响应之前，getUsers.php是否为JSON应用程序/JSON设置了正确的内容类型头？在php中，我创建了一个数组$arr=[]，用内容填充它，并用echo JSON_encode$arr将其发送回JSOk，但这并没有回答我的问题使用标题“Content-Type:application/json”；在回应之前，看看这是否有帮助；不幸的是，问题仍然存在。jquery和老式ajax的混合让我的眼睛有点流血。请注意，启动$.get请求循环并不意味着它们的成功回调将以相同的顺序执行。