如何使用ajax从网站读取值?

时间:2017-12-22 20:19:14

标签: javascript php ajax html5

我是JavaScript的新手,我正在尝试为我的网站做一个小项目,我需要一些帮助。

我需要从这个网站(https://use.gameapis.net/mc/query/players/147.135.204.52)读取我服务器中的播放器数量,然后在我的网站上写。

我试试这个,但它有效,你能看到问题吗?

<script>
$(document).on("ready", function() {
    setInterval(queryJugadores, 5000);
  queryJugadores();
    $(".navbar-brand").tooltip({placement: "bottom", html: true});
  $("[data-toggle='tooltip']").tooltip();
});

  function queryJugadores() {
    $.ajax({
      url: "https://use.gameapis.net/mc/query/players/147.135.204.52",
      method: "GET",
      success: function(res){
        if (res["status"]) {
          actualizarJugadores(res["players"]["online"]);
        }
      }
    });
  }

function actualizarJugadores(num) {
  var digitos = ("" + num).split("");
  var elem = $(".cuenta-jugadores").children("dd");
  elem.empty();
  for (index = 0; index < digitos.length; index++){
    elem.append("<span>" + digitos[index] + "</span>")
  }
  var color = "#43DBE7";

  if (num==0) {
    color = "#d9534f"
  }
  elem.children("span").css("background-color",color);
}
<html>
<body>
<dl class="cuenta-jugadores">
				<dd>
					<span>0</span>
					<span>1</span>
					<span>2</span>
					<span>3</span>
				</dd>
			</dl>
</body>
</html>

非常感谢。

2 个答案:

答案 0 :(得分:3)

您的代码运行正常。

您在顶部有一些额外的代码,看起来需要jQueryUI库https://jqueryui.com/tooltip/并引用您未包含在html中的元素(navbar-brand)。我删除了该代码。

  $(document).on("ready", function() {
    setInterval(queryJugadores, 5000);
    queryJugadores();
  });

function queryJugadores() {
  $.ajax({
    url: "https://use.gameapis.net/mc/query/players/147.135.204.52",
    method: "GET",
    success: function(res) {
      if (res["status"]) {
        actualizarJugadores(res["players"]["online"]);
      }
    }
  });
}

function actualizarJugadores(num) {
  var digitos = ("" + num).split("");
  var elem = $(".cuenta-jugadores").children("dd");
  elem.empty();
  for (index = 0; index < digitos.length; index++) {
    elem.append("<span>" + digitos[index] + "</span>")
  }
  var color = "#43DBE7";

  if (num == 0) {
    color = "#d9534f"
  }
  elem.children("span").css("background-color", color);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <dl class="cuenta-jugadores">
    <dd>
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </dd>
  </dl>
</body>

</html>

答案 1 :(得分:0)

除了在Ajax语法中将“method”更改为“type”之外,我看不到任何其他错误。

$(document).on("ready", function() {
  setInterval(queryJugadores, 5000);
  queryJugadores();
  /*
  $(".navbar-brand").tooltip({
    placement: "bottom",
    html: true
  });
  $("[data-toggle='tooltip']").tooltip();*/
});


function queryJugadores() {
  $.ajax({
    url: "https://use.gameapis.net/mc/query/players/147.135.204.52",
    type: "GET",
    /* dataType: 'json', */
    success: function(res) {
      if (res["status"]) {
        actualizarJugadores(res["players"]["online"]);
      }
    }
  });
}

function actualizarJugadores(num) {
  var digitos = ("" + num).split("");
  var elem = $(".cuenta-jugadores").children("dd");
  elem.empty();
  for (index = 0; index < digitos.length; index++) {
    elem.append("<span>" + digitos[index] + "</span>")
  }
  var color = "#43DBE7";

  if (num == 0) {
    color = "#d9534f"
  }
  elem.children("span").css("background-color", color);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="cuenta-jugadores">
  <dd>
    <span>0</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </dd>
</dl>