Question

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

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

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

Answer 1

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

HTML

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

javascript使用jQuery

$("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");
});

category / list endpoint（一个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 2

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

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

Answer 3

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

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

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

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

Answer 4

选项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 5

以为我会把它放在那里，因为w3schools是我的朋友，我有点跟随他们在这篇文章中说的话。 W3Schools PHP & AJAX communication

用一个按钮调用php和javascript函数

5 个答案:

选项1

选项2