javascript - 如何简单地编写Ajax脚本(删除重复代码)？

Question

我想简化以下脚本，并创建一个可重用的函数， 我使用它:

<span id="test"></span>
<span id="abc"></span>
<span id="123"></span>

现在是这样:

<script>
  $(document).ready(function(){
    var callAjax = function(){
      $.ajax({
        method:'get',
        url:'abctest.php',
        success:function(data){
          $("#test").html(data);
        }
      });
    }
    setInterval(callAjax,1000);
  });  

  $(document).ready(function(){
    var callAjax = function(){
      $.ajax({
        method:'get',
        url:'getabc.php',
        success:function(data){
          $("#abc").html(data);
        }
      });
    }
    setInterval(callAjax,1000);
  });

  $(document).ready(function(){
    var callAjax = function(){
      $.ajax({
        method:'get',
        url:'123.php',
        success:function(data){
          $("#123").html(data);
        }
      });
    }
    setInterval(callAjax,1000);
  });
</script>

如您所见，我所需要做的就是更改 url 和 #，因此我创建了一个函数:

function good(url,tag){
    var callAjax = function(){
      $.ajax({
        method:'get',
        url:'url.php',
        success:function(data){
          $("#tag").html(data);
        }
      });
    }
    setInterval(callAjax,1000);
  }

并将脚本重写为:

<script>
$(document).ready(good(abctest,test));
$(document).ready(good(getabc,abc));
$(document).ready(good(123,123));
</script>

看起来好多了。但似乎没那么容易。 它不工作。如何解决这个问题？

Answer 1

你就快到了。您需要手动连接字符串，例如

function good(url,tag){
    var callAjax = function(){
      $.ajax({
        method:'get',
        url:url+'.php',
        success:function(data){
          $("#"+tag).html(data);
        }
      });
    }
    setInterval(callAjax,1000);
  }

Javascript 与 php 不同，其中变量可以在双引号之间进行计算。

此外，您需要将参数作为字符串传递

$(document).ready(function(){
    good('abctest','test');
    good('getabc','abc');
    good('123','123');
});