Question

我正在尝试向here，

学习

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
     jQuery.support.cors = true;
        $.ajax({
        crossDomain: true,
        async : true,
        type: "POST",
        url: "http://san.gotdns.ch:8025/json",

        success: function(result){
            $("#div1").html(result);
        },
        jsonpCallback: 'callbackFnc',
        failure: function () { },
        complete: function (data) {
        $("#div2").html("Success : ");
                if (data.readyState == '4' && data.status == '200') {

                    //document.write("Success : ");
                    //document.write(data);
                }
                else {
                    document.writeln("Failed");
                }
            }
            // -----
        }
        );
    });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>
<div id="div2"><h2>Complete</h2></div>
</body>
</html>

如何将其设置为在加载页面时自动运行。并在5秒后运行它。像this之类的东西，但我想获取网址而不是显示/隐藏div！

Answer 1

您可以使用setTimeout

$(document).ready(function() {
  setTimeout(function(){
    jQuery.support.cors = true;
    $.ajax({
      crossDomain: true,
      async: true,
      type: "POST",
      url: "http://san.gotdns.ch:8025/json",
      success: function(result) {
        $("#div1").html(result);
      },
      jsonpCallback: 'callbackFnc',
      failure: function() {},
      complete: function(data) {
          $("#div2").html("Success : ");
          if (data.readyState == '4' && data.status == '200') {

            //document.write("Success : ");
            //document.write(data);
          } else {
            document.writeln("Failed");
          }
        }
        // -----
    });
  },5000); // delay of 5 seconds
});

Answer 2

我不确定是什么阻止你关注另一页。您可以在5秒内将您想要运行的任何内容包裹起来：

window.setTimeout(function () {
  // Stuff to run after 5 seconds.
}, 5000 );

所以你的代码将是：

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        // Instead of button click, change this.
        setTimeout(function() {
          jQuery.support.cors = true;
          $.ajax({
            crossDomain: true,
            async: true,
            type: "POST",
            url: "http://san.gotdns.ch:8025/json",
            success: function(result) {
              $("#div1").html(result);
            },
            jsonpCallback: 'callbackFnc',
            failure: function() {},
            complete: function(data) {
              $("#div2").html("Success : ");
              if (data.readyState == '4' && data.status == '200') {

                //document.write("Success : ");
                //document.write(data);
              } else {
                document.writeln("Failed");
              }
            }
          });
        }, 5000);
      });

    </script>
  </head>

  <body>

    <div id="div1">
      <h2>Let jQuery AJAX Change This Text</h2></div>

    <button>Get External Content</button>
    <div id="div2">
      <h2>Complete</h2>
    </div>
  </body>

</html>

你有一些额外的不必要的标签。我删除了它们。请不要使用document.write功能，因为它很危险。而是使用元素并更新其内容。以下代码：

  if (data.readyState == '4' && data.status == '200') {

    //document.write("Success : ");
    //document.write(data);
  } else {
    document.writeln("Failed");
  }

应替换为：

  if (data.readyState == '4' && data.status == '200') {
    $("#div2").append(data);
  } else {
    $("#div2").append("An Error Occurred");
  }

在加载和5秒后运行ajax调用结果

2 个答案: