簡體   English   中英

perl cgi如何存儲/發送用戶在動態表中輸入的數據

[英]perl cgi how to store/send data entered by user in dynamic table

在閱讀了該論壇的一些話題之后,我能夠創建一個CGI頁面,其中包含動態表。 現在,我需要捕獲在表中輸入的信息,並將其存儲在后端(我打算存儲到db中)。

有人可以告訴我怎么做。 我聽說可以使用jquery和AJAX完成。 但是我是Web技術的新手,不知道如何繼續使用它們。

注意 :正如我提到的那樣,它是一個動態表。 用戶可以根據需要添加/刪除行。 我需要捕獲所有這些數據。

這是我到目前為止嘗試過的

Perl CGI腳本

#!C:\Program Files\Perl\bin\perl
use strict;
use warnings;
use CGI qw{ :standard };
use CGI::Carp qw{ fatalsToBrowser };
print_page_header();
print_html_head_section();


#################
## Subroutines ##
#################
sub print_page_header {
    print "Content-type:  text/html\n\n";
}


sub print_html_head_section {
    print "<head>\n";
    print "<title>sample test page</title>\n";
    print "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'  type='text/javascript'></script>\n";
     print "<script src='../js/mastertable_rowcontrol.js'  type='text/javascript'></script>\n";
    #print qq{
    #       <script>
    #       function myFunction() {
    #       var table=document.getElementById("master_table");
    #       for (var i=1;i<table.rows.length;i++) {
    #       alert(table.rows.[i].cells[0].innerHTML);
    #       }
    #       }
    #       </script>
    #       };
    print "</head>\n";
}

print qq{
     <table id="master_table" border="0">
     <tr>
     <th>COL1</th>
     <th>COL2</th>
     <th>COL3</th>
     <th>COL4</th>
     <td>&nbsp;</td>
     </tr>
     <tr>
     <td>
     <input type="text" name="col1" class="col1"/>
     </td>
         <td>
     <input type="text" name="col2" class="col2"/>
     </td>
         <td>
     <input type="text" name="col3" class="col3"/>
     </td>
         <td>
     <input type="text" name="col4" class="col4"/>
     </td>
         <td>
     <input type="button" name="addRow" class="add" value='Add'/>
     </td>
         <td>
     <input type="button" name="removeRow" class="removeRow" value='Delete'/>
     </td>
     </tr>
     <tr>
     <td colspan="4" align="center">
     <input type="button" name="submit_data" class="submit" value="Submit" onclick="myFunction()"/>
     </td>
     </tr>
     </table>
     };

用jquery創建動態表

$(document).ready(function () {
  $(document).on('click','#master_table .add',function () {

       var row=$(this).closest('tr');
       var clone = row.clone();
       var tr= clone.closest('tr');
       tr.find('input[type=text]').val('');
       $(this).closest('tr').after(clone);
       var $span=$("#master_table tr");
       $span.attr('id',function (index) {
       return 'span' + index;
});
  });

  $(document).on('click','#master_table .removeRow',function () {
      if ($('#master_table .add').length > 1) {
         $(this).closest('tr').remove();
        }

    });

}); 

如果使用HTML構建動態表,並根據需要將用戶輸入提交給Perl腳本以進行進一步處理或分類,則將更加容易。

只需設計一個看起來像表格的HTML表單即可(您可以使用已經編寫的大多數代碼)。 要將其提交到perl腳本,您需要執行以下操作:

<form action="/somefolder/yourperlscript.pl" method="POST">

<!-- Your Table here -->

</form>

您可能還記得,在Linux中,文件的位置應以“ /somefolder/yourscript.pl”開頭,而在Windows上,文件的位置應以“ somefolder / yourscript.pl”開頭的斜杠開頭

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM