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

Question

This is what I'm trying to achieve, but my Googling hasn't helped:

I have a button that adds a new row to a table dynamically. I also add a select component to a cell with the same action all in javascript. I'd like for that select component to populate with values from a sql select statement. Of course I don't want to define the connection to the DB in the JavaScript. So I was wondering if there was a way I could call a PHP function to retrieve the values then store it in variable within JavaScript.

PS I understand that PHP is server side as opposed to JS. But surely this is possible.

Answer 1

here's a simple implementation of such a thing using jQuery's ajax and php.

html

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

javascript using 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 (a php script)

$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);

a little explanation: what happens is a request being made via the JavaScript client to a php script, which returns an array of values in JSON (which is basically a javascript data-structure), those values are added to the select box dynamically.

Please note that on initial load of the page, the select box will be empty.