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

【问题标题】：Single Ajax Function That Able To Call Different PHP page能够调用不同 PHP 页面的单个 Ajax 函数
【发布时间】：2017-07-20 12:23:54
【问题描述】：

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

我知道上面的脚本不起作用，它只是向您展示我试图实现的目标，知道该怎么做吗？请帮忙。

【问题讨论】：

看我的回答。您只是在if 条件中错过了)。
使用浏览器控制台检查错误。

标签： javascript ajax

【解决方案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>

快乐编码

【讨论】：

【解决方案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>

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

【讨论】：