Question

我的index.html下面有按钮：

<button value="about_us.php" onClick="fNt(value)">About Us</button>
<button value="faq.php" onClick="fNt(value)">FAQ</button>
<button value="contact_us.php" onClick="fNt(value)">Contact Us</button>

我想使用AJAX从php页面获取信息作为价值。我知道我可以创建3个AJAX函数来定位3个php页面，但是如果我以后有更多的按钮会消耗很多空间。

所以，我想知道是否可以写这样的东西？

<script>
function fNt(value) {
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","variable of clicked value",true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200{
document.getElementById("ajax").innerHTML = xmlhttp.responseText;}}}
</script>

我知道上面的脚本不起作用，它只是告诉你我想要实现的目标，不知道怎么做？请帮助。

Answer 1

试试这个，它会帮助你......

function fNt(url) {
  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("ajax").innerHTML = xmlhttp.responseText;
    }
  }
}

<button onClick="fNt('about_us.php')">About Us</button>
<button onClick="fNt('faq.php')">FAQ</button>
<button onClick="fNt('contact_us.php')">ContactUs</button>

快乐编码

Answer 2

无论如何，您必须为每个按钮创建单独的回调（除非您希望单击每个按钮执行完全相同的操作）。为什么不将统一的ajax代码放在一个函数中，并将一个url和一个单独的回调函数传递给该函数。如果要检查请求对象状态，只需将其直接传递给回调：

function doGet(route, callback){
    var xhr = new XMLHttpRequest(),
        method = "GET",
        url = route; //If you need to massage the route or anything

    xhr.open(method, url, true);
    xhr.onreadystatechange = callback(xhr);
    xhr.send();
}

然后调用它：

var route = "routedesired.com";
var callback = function(xhrObj){
   if (xhrObj.readyState == 4 && xhrObj.status == 200{
       console.log("HELLO WORLD")
   }
}

另一种方法

我不明白你究竟想要做什么，但是如果你想为每个链接做一些不同的事情，你可以在我创建的doGet函数中添加路由到回调函数：

function doGet(route){

    var xhr = new XMLHttpRequest(),
        method = "GET",
        url = route; //if you need to massage the route or anything

    var callback = function(routeParam){
       if (xhr.readyState == 4 && xhr.status == 200{
           switch(routeParam){
              case "faq.php":{
                 //do some action if route is "faq.php"
              }
              break;
              //continue with the same logic for other URL's
           }
        }
    }

    xhr.open(method, url, true);
    xhr.onreadystatechange = callback(route);
    xhr.send();
}

然后调用它：

<button onClick="doGet('about_us.php')">About Us</button>
<button onClick="doGet('faq.php')">FAQ</button>
<button onClick="doGet('contact_us.php')">Contact Us</button>

最终，有不同的方法来构建它以自动化流程并减少您需要的代码量。您如何处理它的一部分取决于您在请求成功后计划执行的操作。

能够调用不同PHP页面的单个Ajax函数

2 个答案: