2012-12-05 58 views
1
#!/usr/bin/perl 
    # perl cgi script products2.cgi 


use DBI; 
print <<END_HTML; 
Content-type: text/html 
END_HTML 
my $host = "xxx.xxx.xxx"; 
my $port = "xxxx"; 
my $database = "proj4"; 
my $username = "xxxxxx"; 
my $password = "xxxxx"; 
my $database_source = "dbi:mysql:$database:$host:$port"; 


my $dbh = DBI->connect($database_source, $username, $password) 
or die 'Cannot connect to db'; 

my $sth = $dbh->prepare("SELECT distinct category FROM products"); 
$sth->execute(); 

#getting the categories and displaying them 
while(my @row=$sth->fetchrow_array()) { 
my $data =$row[0]; 
my @values = split(' ',$data); 
my $pic = "/~xxxx/proj4/images/".$values[0].".jpg"; 
print <<END_HTML; 
<div class="view view-first"> 
END_HTML 

print"<img src=\"$pic\" alt=\"$row[0]\"/>"; 
print "<h2 class=\"choc\"><span>$row[0]</span></h2>"; 
print "<div class=\"mask\">"; 
print "<h2 class=\"eff\">\"$row[0]\"</h2>"; 
print <<END_HTML; 
<p>One of Our best sellers</p> 
    <a href="#" class="info $values[0]">Discover</a> 
</div> 
</div> 
END_HTML 
} 


$sth->finish(); 
$dbh->disconnect(); 

我想在導航欄中的「產品」鏈接點擊後在我proj.html更換的如何發送HTML準備從Perl腳本顯示?

<div id="content"></div> 

內容上面perl腳本的輸出。

//導航欄產品

<li> 
<a href="/perl/xxxxx/products2.cgi" id="productit"> 
Products 
</a> 
</li> 

我知道我必須使用JavaScript和Ajax,但不知道如何去做。

$('#productit').bind('click', function() { 

var handle = document.getElementById('content'); 

    var req = new HttpRequest('/perl/xxxxx/products2.cgi', callback); 
    //i know this ajax call only expects string to be returned from server 
req.send(); 

handle.innerHTML= //not sure how to populate this     
}); 

可能有人請指導我爲如何發送HTML準備從Perl腳本顯示

回答

1
使用$阿賈克斯()方法

所有你需要做的是print的HTML,它被髮送到客戶端/瀏覽器。

但是...

我注意到在你的Perl代碼一個小細節,這將導致Web服務器拋出500內部服務器錯誤:你忘了你的HTTP標頭後打印一個空行。代碼發佈將發送輸出

Content-type: text/html 
<div class="view view-first"> 
... 

這不是有效的HTTP響應,因爲<div是不可識別的HTTP標頭。它需要發送

Content-type: text/html 

<div class="view view-first"> 
... 

而是用一個空行來表示內容開始前的標題結尾。

這就是爲什麼它通常是使用一個Web框架(如DancerMojolicious,或Catalyst),或者甚至是神祕的CGI.pm,而不是手動處理這些東西是個好主意的原因之一:有這麼多小的細節和奇怪的邊緣情況,你需要得到恰到好處,否則它將無法正常工作。如果這是一個學習練習,那麼自己動手就可以了,並且很好地瞭解所有這些陷阱是什麼,但是最好使用廣泛使用且經過充分測試的模塊來處理代碼,其目的是爲了有用或重要的東西。

+0

謝謝戴夫。我得到500內部服務器錯誤。這解決了它。 – Sush

0

你可以因爲你的使用jQuery

$('#productit').bind('click', function(e) { 
    var handle = document.getElementById('content'); 
    e.preventDefault(); 

    $.ajax({ 
     dataType : 'text', /* the datatype you are returning */ 
     url: '/perl/xxxxx/products2.cgi', 
     success:function (data){ /* data is the data returned from the ajax call */ 
      handle.innerHTML = data; 
     } 
    });    
}); 
+0

謝謝,請你指導我如何發送HTML準備顯示從Perl腳本? – Sush

+0

你是說這不是工作 – Ibu

+0

成功:功能(數據)沒有被擊中。我不知道如何發送HTML準備顯示從Perl腳本 – Sush