一键调用php和javascript函数

Question

这是我想要实现的目标，但我的谷歌搜索没有帮助：

我有一个按钮，可以动态地将新行添加到表中。我还在 javascript 中将一个选择组件添加到具有相同操作的单元格中。我希望该选择组件使用 sql select 语句中的值填充。当然，我不想在 JavaScript 中定义与数据库的连接。所以我想知道是否有一种方法可以调用 PHP 函数来检索值，然后将其存储在 JavaScript 中的变量中。

PS 我知道 PHP 是服务器端而不是 JS。但这肯定是可能的。

Answer 1

我只是想把它放在那里，因为 w3schools 是我的朋友，我有点听从他们在这篇文章中所说的话。 W3Schools PHP & AJAX communication

Answer 2

选项 1

在客户端使用类似这样的方式将包含所有可能值的 php 数组传递给客户端：

var opt_values = [<?php echo $php_values; ?>]; //javascript array

或

var opt_values = <?php echo json_encode($php_values); ?>; //json object

选项 2

另一种方法是发出 ajax 请求。编写一个返回 JSON 对象的 php 函数，然后您可以使用 jQuery ajax 方法操作结果：

PHP函数：

$json = array();
$result = mysqli_query ($connection, $query);
while($row = mysqli_fetch_array ($result))     
{
    $bus = array(
        'id' => $row['id'],
        'text' => $row['name']
    );
    array_push($json, $bus);
}

return = json_encode($json)

jQuery

$('#button-id').click(function(){
//adds a new row to a table dynamically
    $.ajax({
        type: "get",
        dataType: "json",
        url: "/get_values.php",
        success: function (response) {
            var $el = $("#myselect"); //get the select
            $el.empty(); // remove old options
            //Append the new values
            $.each(response, function(key, value) {
              $el.append($("<option></option>")
                 .attr("value", value.id).text(value.text));
            });
        }
    });
});

Answer 3

这是一个使用 jQuery 的 ajax 和 php 的简单实现。

html

<select data-source-url="/category/list"></select>

使用 jQuery 的 JavaScript

$("select[data-source-url]").each(function(){
    var url = $(this).attr("data-source-url");
    var el = $(this);
    $.get(url, function(data){
        for (i=0;i<data.length;i++){
            el.append("<option>" + data[i] + "</option>");
        }
    },"json");
});

类别/列表端点（一个 php 脚本）

$list = array();
$list[0] = "category 1";
$list[1] = "category 2";
$list[2] = "category 3";
$list[3] = "category 4";
$list[4] = "category 5";

echo json_encode($list);

一点解释：发生的情况是通过 JavaScript 客户端向 php 脚本发出请求，该脚本返回 JSON 中的值数组（基本上是 javascript 数据结构），这些值被添加到选择框动态的。

请注意，在页面初始加载时，选择框将为空。

Answer 4

Javascript 无法直接连接到数据库。

你想要AJAX。此功能的基本流程如下所示。

1. 创建一个连接到数据库并获取您的选择元素的选项的 PHP 脚本（我们称之为 options.php）。此脚本应从数据库中获取选项并将它们输出为 JSON 数组。
2. 在您的 javascript 中，您将创建一个对 options.php 的 ajax 请求。使用从该脚本返回的 JSON 数据，您将遍历每个元素并创建相应的选项元素并将其附加到您的 select 元素内的 dom。

还可以考虑使用jQuery。它极大地简化了 ajax 并提供了跨浏览器的解决方案。

Answer 5

是的，当然可以。要将 s php 变量存储在 js ariable 中，您可以这样做。 在将其存储到 js 变量之前将所需的值存储在您的 php 变量中

var value = '<?php echo $value;?>';