javascript - 从 JavaScript 函数执行函数文件中的 PHP 函数

Question

我想从 JavaScript 函数调用 PHP 函数。

“为什么？”你可能会问？

我在单独的文件 custom_functions.php 中组织了一系列 PHP 函数

我正在慢慢学习如何使用 JavaScript 和 jQuery 进行构建，所以这就是我弥合差距的方法。我对 PHP 比较熟悉，所以我正在通过那个窗口找到我的方法。

我有一个在index.php 中构造的元素列表。项目列表是从数据库动态构建的，并且 id 属性是根据记录的 id 创建的:

echo "<span id="content_" . $row{'unique_id'} . "\" onClick=\"displayDetails(" . $row{'unique_id'} . ")\">";

displayDetails(record_no)是外部 JavaScript 文件中的 JavaScript 函数。

现在我尝试了这个:

function displayDetails(record){
    data = {};
    //data = <?php retrieveContent(content_id); ?>
    $('.output').html("Testing Function - Section " + section_number);
}

但是这当然行不通，因为 PHP 是服务器端操作，而 JavaScript 是 client-side action .

我的具体问题与 this one 完全不同让我难住了。

我有一个 PHP 文件，在其中我希望 AJAX 从文件中的一系列函数中调用特定函数。

不清楚的是如何使用 AJAX 调用文件中的函数。我是否像这样传入 URL:“custom_functions.php?functionname=displaydetails&record=<some number>”？

目前，我不想使用 jQuery AJAX，我想纯粹从纯 JavaScript/DOM Angular 了解 XMLHttpRequest 的基础知识。

Answer 1

是的，您必须像您提到的那样调用 PHP 文件。

通过AJAX调用PHP脚本时，返回数据一般为JSON格式。您在 PHP 中回显的内容将成为 AJAX 结果。

Javascript 负责创建元素来显示和注入(inject)数据。

但是，您也可以将 PHP 脚本的结果 HTML 直接注入(inject)到 DOM 中。

示例1:将ajax响应数据直接注入(inject)DOM

Javascript

axios.get('/example_api.php').then(resp => {
    // in this case, you gonna just put response data into innerHTML where you wanna show.
    someDomeElement.innerHTML = resp.data;
});

PHP(example_api.php)

echo "<p>hello world</p>";

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

示例2:ajax响应数据为json时

Javascript

axios.get('/example_api.php').then(resp => {
    resp.data.forEach(function(item) {
       // In this case, you have to create DOM elements to show data 
       createElement(item); 
    });
});

PHP(example_api.php)

echo json_encode(array('data1', 'data2'));

更新

如果您评论更多问题，我会在这里更新答案。