php - 如何在不重复代码的情况下调用多个 AJAX 函数(到 PHP)

Question

我有一个使用 AJAX 和 PHP 来显示图像的小脚本。您可以在下面看到，如果我调用函数 mom()，它会在 PHP 文件 index.php?i=mom 中查找并显示我要查找的图像。

但是我需要 javascript 更轻便，因为我有 30 张图片，对于每张图片，我都必须修改并复制下面的脚本。有没有一种更简单的方法可以让功能不同，但仍然调用不同的页面？

<script type="text/javascript">
function mom()
{
    var xmlHttp = getXMLHttp();
    xmlHttp.onreadystatechange = function()
    {
        if(xmlHttp.readyState == 4)
        {
            HandleResponse(xmlHttp.responseText);
        }
    }
    xmlHttp.open("GET", "index.php?i=mom", true); 
    xmlHttp.send(null);
}
function HandleResponse(response)
{
  document.getElementById('mom').innerHTML = response;
}
</script>

我的触发器是这个

<a href="#" onclick='mom();' />Mom</a>
<div id='mom'></div>

Answer 1

你可以修改你的函数，让它接受一个参数:

// The function receives the value it should pass to the server
function my_func(param)
{
  var xmlHttp = getXMLHttp();
  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4)
    {
      // Pass the received value to the handler
      HandleResponse(param, xmlHttp.responseText);
    }
  }
  // Send to the server the value that was passed as a parameter
  xmlHttp.open("GET", "index.php?i=" + param, true); 
  xmlHttp.send(null);
}

当然，在第二个函数中使用该参数:

function HandleResponse(param, response)
{
  // The handler gets the param too -- and, so, knows where to inject the response
  document.getElementById(param).innerHTML = response;
}

并修改您的 HTML，以便使用正确的参数调用该函数:

<!-- for this first call, you'll want the function to work on 'mom' -->
<a href="#" onclick="my_func('mom');" />Mom</a>
<div id='mom'></div>

<!-- for this secondcall, you'll want the function to work on 'blah' -->    
<a href="#" onclick="my_func('blah');" />Blah</a>
<div id='blah'></div>