如何调用多个AJAX功能（以PHP）不重复code [英] How to call multiple AJAX functions (to PHP) without repeating code

问题描述

我有一个小脚本，它使用AJAX和PHP来显示图像。你可以看到下面，如果我调用函数妈妈（），它看起来在PHP文件中的index.php？我=妈妈和显示我正在寻找的形象。

但我需要的JavaScript要轻一些，因为我有30个图像，为每一个我要修改和复制下面的脚本。有没有一个简单的方法来具备的功能是不同的，还自称不同的网页？

 ＆LT;脚本类型=文/ JavaScript的＆GT;
功能妈（）
{
    VAR XMLHTTP = getXMLHttp（）;
    xmlHttp.onreadystatechange =功能（）
    {
        如果（xmlHttp.readyState == 4）
        {
            用handleResponse（xmlHttp.responseText）;
        }
    }
    xmlHttp.open（GET，我的index.php =妈妈？，真正的）;
    xmlHttp.send（空）;
}
功能用handleResponse（响应）
{
  的document.getElementById（'妈妈'）的innerHTML =响应。
}
＆LT; / SCRIPT＆GT;
 

我的触发器是这样

 ＆LT; A HREF =＃的onclick ='妈妈（）;' /＆GT;妈妈＆LT; / A＆GT;
＆LT; D​​IV ID ='妈妈'＆GT;＆LT; / DIV＆GT;
 

解决方案

您可以修改您的函数，所以它需要一个参数：

  //这个函数接收值应该传递给服务器
函数my_func，并将（参数）
{
  VAR XMLHTTP = getXMLHttp（）;
  xmlHttp.onreadystatechange =功能（）
  {
    如果（xmlHttp.readyState == 4）
    {
      //接收到的值传递给处理程序
      用handleResponse（参数，xmlHttp.responseText）;
    }
  }
  //发送到服务器，这是作为参数传递的值
  xmlHttp.open（GET，我的index.php =？+参数，真正的）;
  xmlHttp.send（空）;
}
 

而且，当然，使用该参数，在第二功能：

 函数用handleResponse（参数，响应）
{
  //该处理程序获取的参数太多 - 和，因此，知道在哪里可以注入响应
  的document.getElementById（参数）.innerHTML =响应;
}
 

和修改HTML，这样的函数调用合适的参数：

 ＆LT;！ - 这个第一个电话，你想要的功能上班'妈妈' - ＆GT;
＆LT; A HREF =＃的onclick =my_func，并将（'妈妈'）; /＆GT;妈妈＆LT; / A＆GT;
＆LT; D​​IV ID ='妈妈'＆GT;＆LT; / DIV＆GT;

＆LT;！ - 这个secondcall，你需要的功能，工作在'等等' -​​ ＆GT;
＆LT; A HREF =＃的onclick =my_func，并将（'嗒嗒'）; /＆GT;布拉赫＆所述; / a取代;
＆LT; D​​IV ID ='嗒嗒'＆GT;＆LT; / DIV＆GT;
 

I have a little script which uses AJAX and PHP to display an image. You can see below that if I call the function mom() it looks in the PHP file index.php?i=mom and displays the image I'm looking for.

But I need the javascript to be lighter as I have 30 images and for each one I have to modify and copy the script below. Is there not a simpler way to have the functions be different and still call a different page?

<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>

My Trigger is this

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

解决方案

You could modify your function so it takes a parameter :

// 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);
}

And, of course, use that parameter in the second function :

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

And modify your HTML so the function is called with the right parameter :

<!-- 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>

这篇关于如何调用多个AJAX功能（以PHP）不重复code的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！