javascript - 如何构造jquery ajax以灵活输入和输出？

Question

我有一个单页结构化网站。我正在尝试使用 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>

JS、ajax(我沿着链接传递数据变量来控制操作):

$(document).on("click", ".dbLink", function(e) {
    e.preventDefault();
    var theAction = $(this).attr("data-variable");
    $.ajax({
        url: 'ini/functions.php',
        data: { action: theAction },
        type: 'post',
        dataType: 'json',
        success: function(resp){
            if(resp.data){
                $(resp.target).html(resp.data);
            }
        }
    });
});

函数.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);
}

Answer 1

添加另一个 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);
    }
}

当然还要设置dataType:"json"

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

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