mysql - PERL と jquery-ajax を使用して mysql データを取得する

Question

選択ボックス、ボタン、テーブルの 3 つの基本要素を持つ Web ページを作成しています。高レベルから、ユーザーは要素を選択し、ボタンをクリックします。ボタンをクリックすると、データを mySQL db のテーブルに配置する PERL スクリプトが実行されます。これらはすべて正常に機能します。

現在、動的テーブルを使用して DB テーブルの値を HTML ファイルに返そうとしています。しかし、私が見つけたすべてのソースには、html タグを記述した CGI ファイルが含まれています。値を渡しているにもかかわらず、CGI がテーブル ID を知っていることを理解していないため、これが正しいとは思いません。また、js ファイルが正しくなく、2 つの別々の AJAX 呼び出しがあることはわかっていますが、それは私が頭の中で論理的に処理しているホームです。

CGI ファイルと JS ファイルのどちらを修正するのが先かわかりません。

HTML コード (index.html):

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
        <script type="text/javascript" class="jsbin" src="C:/xampp/DataTables/media/js/jquery.dataTables.js" charset="utf-8"></script>
        <script type="text/javascript" src="js/main.js" charset="utf-8"></script>
        <script type="text/javascript" src="js/RunPerlScript.js" charset="utf-8"></script>
        <script type="text/javascript" src="js/table.js" charset="utf-8"></script>
    </head>
    <body>
        <header>
            <h1></h1>
        </header>
        <form name="myForm" method="GET" action="">
            <select id="cdLDAP" >
                <option/>
            </select>
            <input type="button"  id="btn_run" name="btn_run" value="Run"></input>
        </form>
        <table id="results_table">
            <thead>
                <tr>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

パール (CGI):

 #!/usr/bin/perl -T
    use CGI;
    use DBI;
    use strict;
    use warnings;

    # read the CGI params
    my $cgi = CGI->new;
    my $inputselection = $cgi->param("cdLDAP");
    my $html_table = $cgi->param("html_table_results");
    my ($base_dn, $tblname);
    #my $password = $cgi->param("password");

    #my $inputselection = "Disabled Users";
    #LDAP Connection parameters
    if ($inputselection eq "Disabled Users") {
        $base_dn = "";
        $tblname = "disabled_user";
    } elsif ($inputselection eq "") {
        $base_dn = "";
        $tblname = "service_account";
    } elsif ($inputselection eq "") {
        $base_dn = "";
        $tblname = "";
    } else {
        die;
    }

    # connect to the database
    my ($platform,$database,$host,$port,$db_user,$pw) = ("mysql","results","localhost","3306","resultsuser","mysql123");
    my $dsn = "DBI:$platform:database=$database,host=$host,port=$port";
    my $connect = DBI->connect("DBI:mysql:database=$database;host=$host",$db_user,$pw,{RaiseError => 1});

    #query db to get results set for table output
    my $query_results = "SELECT * FROM " . $tblname;
    my $query_handle = "";
    $query_handle = $connect->prepare($query_results) or die $connect->errstr;
    $query_handle->execute() or die $query_handle->errstr;

    print header;
    # HTML for the beginning of the table
    # we are putting a border around the table for effect
    print "<table border=\"1\" width=\"800\"> \n";

    # print your table column headers
    print "<tr><td>User ID</td><td>Status</td><td>Last Password Reset</td><td>Reset Needed?</td></tr>\n";

    my (@data,$uid,$status,$pwlstset,$resetmsg);

    # retrieve the values returned from executing your SQL statement
    foreach (@data = $query_handle->fetchrow_array()) {
    $uid = $data[0];
    $status = $data[1];
    $pwlstset = $data[2];
    $resetmsg = $data[3];

    # print your table rows
    print "<tr><td>$uid</td><td>$status</td><td>$pwlstset</td><td>$resetmsg</td></tr>\n";

    }

    # close your table
    print "</table>\n";

    # exit the script
    exit;

JS/JQuery/AJAX:

$(function() {
    $('#btn_run').click(function() {
        var tblname = $('#cdLDAP').val();
        var html_table = $('#results_table').attr('id');
        $.ajax({
            type: "GET",
            url: "/perl/cgitest.pl", // URL of the Perl script that queries LDPA and inputs to mySQL
            data: "cdLDAP=" +tblname,
            // script call was *not* successful
            error: function() { 
                alert("ERROR!");
            }, // error 
            // script call was successful 
            // data contains the JSON values returned by the Perl script 
            success: function(data){
                alert("success!");
            } // success
        }); // ajax
        $.ajax({
            type: "GET",
            url: "/perl/cgitest2.pl", // URL of the Perl script that retirves data from mySQL
            data: "cdLDAP=" +tblname +",html_table_results=" +html_table,
            // script call was *not* successful
            error: function() { 
                alert("ERROR!");
            }, // error 
            // script call was successful 
            // data contains the JSON values returned by the Perl script 
            success: function(data){
                alert("success!");
            } // success
        }); // ajax
    });
});

1) 私の PERL スクリプトは html タグを書くべきですか? index.htmlはいの場合、新しいhtmlファイルではなく、どのように書き込むのですか? 2）テーブル構造がjqueryファイルによって作成されている場合、魚を与えられたのではなく、釣り方を教えられようとしているので、良い教育ソースがあれば幸いです。

score 4 · Accepted Answer

私のPERLスクリプトはhtmlタグを書くべきですか?

PERL のようなものはありません。

ページを動的に更新するために Ajax を使用する場合 (目立たない JavaScriptを使用する必要があることに注意してください)、次の 2 つの基本的な方法があります。

サーバーはクリーンなデータ構造 (おそらく JSON) でデータを返します
サーバーが HTML のフラグメントを返す

私は通常、前者のアプローチを支持します (この場合、Perl で hashref の配列を作成し、JSON モジュールを介してapplication/json実行し、 Content-Type HTTP ヘッダーで出力します。

一部のバージョンの Internet Explorer にinnerHTMLはテーブル要素の編集に問題があるため、最初のオプションの方が適切です。

はいの場合、新しい html ファイルではなく index.html に書き込むにはどうすればよいですか?

ファイルにはまったく書き込みません。STDOUT 経由でデータを返すと、Web サーバーはそれをクライアントに返します。

テーブル構造がjqueryファイルで作成されている場合、良い教材があると助かります

http://api.jquery.com/category/manipulation/

mysql - PERL と jquery-ajax を使用して mysql データを取得する

1 に答える 1

Related

Reference