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

【问题标题】：run a ajax call result on load and after 5 seconds在加载时和 5 秒后运行 ajax 调用结果
【发布时间】：2017-01-07 05:33:50
【问题描述】：

我正在努力向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 之类的东西，但我想获取 URL 而不是显示/隐藏 div！

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

我不确定是什么阻止了您关注其他页面。您可以在 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");
  }

【讨论】：

感谢 Praveen，成功时的结果变量和完成时的数据变量有什么区别？
@Ciastopiekarz complete 和 success 几乎相同。你只需要使用一个。
@Ciastopiekarz success 函数获得两个参数：从服务器返回的数据，根据“dataType”参数格式化，以及描述状态的字符串。 complete 函数获得两个参数：XMLHttpRequest 对象和描述请求成功类型的字符串。
@Ciastopiekarz 查看更多信息：stackoverflow.com/questions/1021062
@Ciastopiekarz 好吧，好吧！

【解决方案2】：

您可以使用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
});

【讨论】：

@user2181397 函数 setTimeout(function(){ 的名称是什么，所以我可以在启动时调用它或在任何地方调用它？