Jquery 级联下拉菜单 php 和催化剂

Question

我正在尝试在 Catalyst Web 应用程序中实现级联下拉菜单。 objective 是 select 第一个菜单中的数据库 table 并且 table 中的列出现在第二个菜单中。我的策略是使用 Jquery 和 PHP 辅助脚本来运行对数据库的查询。

Jquery代码：

$("#db_table").change(function() {
    console.log("dbtable changed");
    $("#db_field").load("[% c.uri_for('/field_get.php')%]?choice=" + $("#db_table").val());
});

PHP:

<?php
    $username = "webuser";
    $password = "webuser";
    $hostname = "localhost";

    $dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
    $selected = mysql_select_db("mousesom", $dbhandle) or die("Could not load database");
    $choice = mysql_real_escape_string($_GET['choice']);

    $query = "SELECT column_name FROM information_schema.columns WHERE table_name = '$choice';";

    $result = mysql_query($query);

    while ($row = mysql_fetch_array($result)) {
        echo "<option>" . $row{'dd_val'} . "</option>";
    }
?>

HTML:

Table:<select id="db_table">
   <option selected value="base">Choose a Table</option>
   <option value="neurons">Neurons</option>
   <option value="peaks_factors">Transcription Factors</option>
   <option value="peaks">Peaks</option>
   <option value="peaks_selection">Selection</option>
   <option value="peaks_histmods">Histone Modification</option>
</select>
Field:<select id="db_field">
   <option value="Placeholder">Please Select a Table</option>
</select>

到目前为止，我已经验证了 javascript 请求正在触发，但我没有得到预期的响应。根据 Catalyst 测试服务器的日志输出，似乎所需的参数很可能没有传递给 PHP 帮助程序脚本，而是被 Catalyst 拆分为查询参数...

[info] *** Request 8 (0.013/s) [17122] [Fri Jun 26 19:22:50 2015] ***
[debug] Path is "/"
[debug] Arguments are "field_get.php"
[debug] "GET" request for "field_get.php" from "10.21.136.40"
[debug] Query Parameters are:
.-------------------------------------+--------------------------------------.
| Parameter                           | Value                                |
+-------------------------------------+--------------------------------------+
| choice                              | peaks_histmods                       |
'-------------------------------------+--------------------------------------'

显然这不是我想要发生的事情，我想知道 Catalyst 是否有另一种方法将这些参数传递给帮助程序脚本或其他一些解决方法。我一直在搜索各种文档，到目前为止，我一无所获。任何帮助将不胜感激！

Answer 1

您的请求被当作 Catalyst 操作处理，因为您在使用模板代码时告诉它 [% c.uri_for() %]。如果你要调用一个 PHP 脚本，它需要在 Catalyst URI 命名空间之外，也许将它放在你的 root/static 资源中，或者你的网络服务器希望找到的其他地方 PHP 资源。

话虽如此，我不明白你为什么要在这个组合中引入PHP。 returns 列名称列表的 Catalyst 控制器应该很容易实现。以下未经测试的代码假定您的 Catalyst 应用程序中有一个可用的数据库句柄，名为 $dbh。无论您使用什么数据库抽象层（DBIC？），都有一种直接的方法来实现这一点。您也可以选择为此创建适当的模型代码。

sub get_fields :Args(1) {
    my ($self, $c, $table) = @_;
    my $qry = "SELECT column_name FROM information_schema.columns WHERE table_name = ?";
              # we'll have none of that nasty SQL injection-vulnerable code here...
    my $result = "";
    my @res = $dbh->selectall_arrayref($qry, { Slice=>{} }, $table );
    map { $result .= sprintf("<option>%s</option>", $_->{column_name} } @res;
    $c->res->body($result);
}

我会第一个指出这种方法不是最佳实践，但它可能会给您一些关于应该如何完成的想法。（提示：更好的做法是 return 列名称为 JSON，并处理在 jQuery 中创建 <option> 标签，而不是创建 HTML 片段在您的 Catalyst Action 中。因为您可能会发现一种方法接受 table 名称和 return 其列可能通常有用。）

更新

您可以使用 Catalyst::View::JSON，并且通过将您的列列表放入 $c->stash->{json}，它会做正确的事，即使它对于用例来说是过大的。您也可以在 $c->res->body() 中将其转换为 JSON 和 return：如果它不为空，则绕过所有模板处理。所以你需要的可能很简单：

use JSON;

sub get_fields :Args(1) {
    my ($self, $c, $table) = @_;
    my @rows = $c->model('InformationSchema')->result_set('Columns')->search({table_name => $table});
    my $columnlist = [ map { $_->column_name } @rows ];
    $c->res->body(to_json($columnlist));
}

...但是多一点错误检查也不是坏事。

从 jQuery 访问归结为（同样，未经测试）：

$("#db_table").change(function() {
    $.ajax({
        type: "GET",
        url: "[% c.uri_for('/__your_module__/get_fields/') %]" + $("#db_table").val(),
        success: function(json){
            $.each(json, function(i, val) {
                $('#db_field').append($('<option>').text(val).attr('value', val));
            });
        }
    });
});

Jquery 级联下拉菜单 php 和催化剂

Jquery cascading dropdowns with php and catalyst

javascript

php

mysql

jquery

catalyst