Javascript 如何构造jQueryAjax以灵活地处理输入和输出？

我有一个单页结构的网站。我正在尝试使用Ajax根据用户需求更新数据。 我正试图找出如何构造ajax代码，以便它能够灵活地处理输入和输出=我希望根据单击的链接运行不同的函数，并希望将正确的输出返回到正确的div。 HTML链接：

<a href="#page-a" class="dbLink" data-variable="funcA">
<a href="#page-b" class="dbLink" data-variable="funcB">

<div id="page-a">
    <div id="a-result"></div>
</div>

<div id="page-b">
    <div id="b-result"></div>
</div>

functions.php：

include 'dbconnect.php';

function funcA($mysqli){
   $result = $mysqli->query("select * from database");
   $row = mysqli_fetch_assoc($result);
   echo $row['column'];
}

function funcB($mysqli){
   $result = $mysqli->query("select * from database2");
   $row = mysqli_fetch_assoc($result);
   return $row['column'];
}

if (isset($_POST['action'])) {
   $resp = null;
   switch($_POST['action']) {
    case "funcA":
        $resp->data = funcA($mysqli);
        $resp->target = "#page-a";
        break;
    case "funcB":
        $resp->data = funcB($mysqli);
        $resp->target = "#page-b";
        break;
    default:
        break;
  }
  echo json_encode($resp);
}

---

将另一个data-*变量集添加到要输出数据的位置的id。要控制返回数据的格式，请在ajax选项中提供dataType选项，当然还要确保指向的url实际输出该类型的数据。dataType它将告诉jQuery如何解析传入的数据

var theContainer = $(this).attr("data-container");
...
dataType:"json" //or text, or xml etc etc
success: function(data){
   //if data is upposed to be json
   //and datType is set to json
   //data will be an object, same with xml
   //process data how you need to
   $("#"+theContainer).html(whateverYouHaveDone);
}

如果需要在php脚本中控制返回数据的目标，那么将返回的数据转换为json，并将目标选择器发送给它

$resp = new stdClass;
switch($_POST['action']) {
   case "funcA":
      $resp->data = funcA($mysqli);
      $resp->target = "#someContainer";
      break;
   case "funcB":
      $resp->data = funcB($mysqli);
      $resp->target = "#someContainer";
      break;
   default:
      break;
}

echo json_encode($resp);

那么在你的ajax成功中

success: function(resp){
    if(resp.data){
       $(resp.target).html(resp.data);
    }
}

当然还要设置数据类型：json

要仅返回mysql行，请执行与上面相同的操作，但在ajax中，success resp.data将是一个对象。因此，只需使用行的列名访问resp.data的属性即可

success: function(resp){
    if(resp.data){
       //if say you have a column named "username"
       var username = resp.data.username;
    }
}

---

有很多方法可以做到这一点。 我看您已经理解了自定义数据-*属性。我想再添加一个属性：数据目标=

<a href="#page-a" class="dbLink" data-variable="funcA" data-target="a-result">
<a href="#page-b" class="dbLink" data-variable="funcB" data-target="b-result">

<div id="page-a">
    <div class="a-result"></div>
</div>

<div id="page-b">
    <div class="b-result"></div>
</div>

如果你想玩一个真实的例子，我前阵子为stack overflow上的另一个人做了一把小提琴：

---

在左边的框中输入一个数字，如5006，这是邮政编码。然后，目标是右侧输入框中的邮政地址。这个概念与您所追求的非常相似，有数据目标。

但是如何将$target控制为我在functions.php中运行的任何对象？我的意思是目标取决于request@MacLuc对不起，我不知道你的意思。我的示例将把functions.php的输出添加到单击链接的href属性中链接的任何div中，以便functionB输出到divpage-b@MacLuc哦，你的意思是你不想只在div中显示结果？也许在列表中显示FunctionA的结果，在表中显示functionB的结果？这就是你的意思吗？啊，我明白了，错过了那部分！那就是我想要的。你能给我一些关于如何将一整行从我的php传递到jquery的提示吗。现在我只回显您所看到的结果。@MacLuc您有两个选项-您可以在php中构建html，然后使用上面的.htmldata将其放入带有jQuery的div中，或者您可以在php中构建一个数组/stdclass，并对其进行json_编码，以便jQuery可以访问属性。如果您只想输出html，第一个选项是我看到的easiestaha。假设我将在php请求中选择整行，如何将其传递回ajax，以便jquery理解它？非常好！这很有道理。当然，将返回作为json对象处理。我现在就要试一试！谢谢你！啊哈，json数据的选择非常好。我的div中似乎没有任何输出。你有时间看看我更新的代码吗？$row['column'；列是行的实际列名吗？

success: function(resp){
    if(resp.data){
       //if say you have a column named "username"
       var username = resp.data.username;
    }
}

<a href="#page-a" class="dbLink" data-variable="funcA" data-target="a-result">
<a href="#page-b" class="dbLink" data-variable="funcB" data-target="b-result">

<div id="page-a">
    <div class="a-result"></div>
</div>

<div id="page-b">
    <div class="b-result"></div>
</div>

$(document).on("click", ".dbLink", function(e) {
    e.preventDefault();
    var theAction = $(this).attr("data-variable");
    var theTarget = $( this ).attr("data-target");

    $.ajax({
        url: 'ini/functions.php',
        data: { action: theAction },
        type: 'post',
        success: function(){
          /* Here you have to change the data[] to match the JSON return from your PHP-script. You can of course do it without JSON, but I would use http://www.php.net/manual/en/function.json-encode.php on an array from PHP.*/
          $("input[class="+ theTarget +"]").html( data["foo"][0]["bar"] );
        }
    });
});