Скрипт Perl (api) не возвращает данные, извлеченные из mysql в html - PullRequest
Новая
       1

Скрипт Perl (api) не возвращает данные, извлеченные из mysql в html

1 голос
/ 15 марта 2020

У меня есть html, который отправляет имя исполнителя в API, который я написал в Perl, который запрашивает базу данных mysql и выводит результат. Я могу опубликовать исполнителя в api, а также api получает данные из базы данных, но они не воспроизводят данные обратно на мою страницу html. Ребята, не могли бы вы помочь? HTML script: 

#!/usr/bin/perl -w
print "content-type:text/html; charset=utf-8\n\n";
print <<ENDTAG

<!DOCTYPE html>
<html>
  <head lang="en">
  <meta charset="UTF-8">
  </head>
<body>
  <form>
  </form>
<script language="JavaScript">
    function showInput()
        {
        var artist = document.getElementById("user_input").value;
        console.log(artist);
        var api = "http://api/post";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("POST", api, true);
        xmlhttp.setRequestHeader("Content-Type", "application/text; charset=UTF-8");
        xmlhttp.setRequestHeader('x-auth-token', 'ooooo');
        xmlhttp.onreadystatechange = function() {
                console.log('readyStatechange:  ' + xmlhttp.readyState);

                 if(xmlhttp.readyState === 4 && xmlhttp.status === 200)
                        {

                        var response = xmlhttp.responseText;
                        document.getElementById('display').innerHTML = response;
                        }
                else
                        {

                    //alert ("Something Went Wrong");
                     // console.error(xmlhttp.status);
                        }
        }
        console.log('Before open: ' + xmlhttp.readyState);

        xmlhttp.send(artist);

}
  </script>
</body>

<form method="POST" action="">
<label><b>Enter Artist</b></label>
    <input type="text" name="message" id="user_input">
  </form>
<input type="submit" onclick="showInput();">
<br>
<label>Your input: </label>
<p><span id="display"></span></p>

</html>
ENDTAG

API perl вернул следующее: 

Opened database successfully
ARTIST is : john denver
Content-Type: text/html; charset=ISO-8859-1

Content-Type: text/html

<p>The database contains the following:</p>
<table cols=3 border=1>
<tr>
<th>Title</th>
<th>Year</th>
<th>Album</th>
</tr><tr>
<td>Downhill Stuff</td>
<td>1979</td>
</tr>
<tr>
<td>Dreamland Express</td>
<td>1985</td>
</tr>
<tr>
<td>Love Is The Master</td>
<td>1986</td>
</tr>
<tr>
<td>Windsong</td>
<td>1975</td>
</tr>
<tr>
<td>Catch Another Butterfly</td>
<td>1969</td>
</tr>
<tr>
<td>Cowboy's Delight</td>
<td>1975</td>
</tr>
<tr>
<td>How Can I Leave You Again</td>
<td>1977</td>
</tr>
<tr>
<td>Love Again</td>
<td>1986</td>
</tr>
<tr>
<td>Sail Away Home</td>
<td>1970</td>
</tr>
<tr>
<td>Sweet Melinda</td>
<td>1979</td>
</tr>
<tr>
<td>Daydream</td>
<td>1969</td>
</tr>
<tr>
<td>Gimme Your Love</td>
<td>1985</td>
</tr>
<tr>
<td>Hold On Tightly</td>
<td>1234</td>
</tr>
<tr>
<td>I Can't Escape</td>
<td>1986</td>
</tr>
<tr>
<td>It's A Possibility</td>
<td>1986</td>
</tr>
<tr>
<td>Let Us Begin (What Are We Maki</td>
<td>1986</td>
</tr>
<tr>
<td>Love Again</td>
<td>1986</td>
</tr>
<tr>
<td>Love Is The Master</td>
<td>1986</td>
</tr>
<tr>
<td>One World</td>
<td>1986</td>
</tr>
<tr>
<td>To The Wild Country</td>
<td>1977</td>
</tr>
<tr>
<td>Dreams</td>
<td>1982</td>
</tr>
<tr>
<td>Forest Lawn</td>
<td>1970</td>
</tr>
<tr>
<td>Got My Heart Set On You</td>
<td>1985</td>
</tr>
<tr>
<td>Tradewinds</td>
<td>1977</td>
</tr>
<tr>
<td>Circus</td>
<td>1969</td>
</tr>
<tr>
<td>Eagles & Horses</td>
<td>1990</td>
</tr>
<tr>
<td>Flight (The Higher We Fly)</td>
<td>1983</td>
</tr>
<tr>
<td>Life Is So Good</td>
<td>1979</td>
</tr>
<tr>
<td>The Ballad Of St. Anne's Reel</td>
<td>1980</td>
</tr>
<tr>
<td>Hold On To Me</td>
<td>1991</td>
</tr>
<tr>
<td>The Harder They Fall</td>
<td>1985</td>
</tr>
<tr>
<td>What One Man Can Do</td>
<td>1982</td>
</tr>
<tr>
<td>Johnny B. Goode</td>
<td>1979</td>
</tr>
<tr>
<td>Shanghai Breezes</td>
<td>1982</td>
</tr>
<tr>
<td>Take Me Home, Country Roads</td>
<td>1971</td>
</tr>
<tr>
<td>Wrangell Mountain Song</td>
<td>1980</td>
</tr>
<tr>
<td>A Wild Heart Looking For A Home</td>
<td>1985</td>
</tr>
<tr>
<td>Wild Montana Skies</td>
<td>1983</td>
</tr>
<tr>
<td>Heart To Heart</td>
<td>1982</td>
</tr>
<tr>
<td>Relatively Speaking</td>
<td>1982</td>
</tr>
<tr>
<td>Gospel Changes</td>
<td>1971</td>
</tr>
<tr>
<td>Around And Around</td>
<td>1971</td>
</tr>
<tr>
<td>Druthers</td>
<td>1977</td>
</tr>
<tr>
<td>Garden Song</td>
<td>1979</td>
</tr>
<tr>

Я искал похожие посты и нашел некоторые, но не смог выяснить, куда я иду неправильно.

1 Ответ

1 голос
/ 15 марта 2020

Я посмотрел ваш код и обнаружил, что вы допустили ряд ошибок: в самой форме и в части отправки (onsubmi=....), в javascript обработке отправки (исправлено - return false, пожалуйста, настройте api на ваш сервер).

Я не копировал базу данных, но использовал свой собственный скрипт с вашими данными из таблицы, вы найдете его ниже.

Я надеюсь, что вы найдете его полезно, хотя я думаю, что AJAX будет лучшим вариантом

Основной файл с perl кодом 

#!/usr/bin/perl

use strict;
use warnings;
use feature 'say';

print "content-type:text/html; charset=utf-8\n\n";

print <<ENDTAG
<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/styles.css">
  </head>
    <body>
        <script language="JavaScript">
            function showInput()
            {
                var artist = document.getElementById("user_input").value;
                console.log(artist);
                //alert(artist);
                var api = "http://localhost/cgi-bin/api_perl.pl";
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("POST", api, true);
                xmlhttp.setRequestHeader("Content-Type", "application/text; charset=UTF-8");
                xmlhttp.setRequestHeader('x-auth-token', 'ooooo');
                xmlhttp.onreadystatechange = function() {
                    console.log('readyStatechange:  ' + xmlhttp.readyState);

                    if(xmlhttp.readyState === 4 && xmlhttp.status === 200)
                    {
                        var response = xmlhttp.responseText;
                        document.getElementById('display').innerHTML = response;
                    } else {
                        //alert ("Something Went Wrong");
                        //console.error(xmlhttp.status);
                    }
                }
                console.log('Before open: ' + xmlhttp.readyState);

                xmlhttp.send(artist);
                return false;
        }
        </script>

        <form method="POST" onsubmit="return showInput();">
            <label><b>Enter Artist</b></label>
            <input type="text" name="message" id="user_input">
            <input type="submit">
        </form>
        <br>
        <label>Your input: </label>
        <p><span id="display"></span></p>
    </body>
</html>
ENDTAG

Файл api_perl.pl

##!/usr/bin/perl

use strict;
use warnings;
use feature 'say';

say "Content-Type: text/html\n";

say "
<p>The database contains the following:</p>
<table cols=3 border=1>
    <tr>
        <th>Title</th>
        <th>Year</th>
        <th>Album</th>
    </tr>
";

while(<DATA>) {
    next if /^\s*$/;
    chomp;
    my($song,$year,$album) = split ',';
    say "<tr><td>$song</td><td>$year</td><td>$album</td></tr>";
}
say "
</table>
";

__DATA__
Downhill Stuff,1979,Album 1
Dreamland Express,1985,Album 2
Love Is The Master,1986,Album 1
Windsong,1975,Album 1
Catch Another Butterfly,1969,Album 2
Cowboy's Delight,1975,Album 1
How Can I Leave You Again,1977,Album 1
Love Again,1986,Album 1
Sail Away Home,1970,Album 1
Sweet Melinda,1979,Album 1
Daydream,1969,Album 1
Gimme Your Love,1985,Album 1
Hold On Tightly,1234,Album 1
I Can't Escape,1986,Album 1
It's A Possibility,1986,Album 1
Let Us Begin (What Are We Maki),1986,Album 1
Love Again,1986,Album 1
Love Is The Master,1986,Album 1
One World,1986,Album 1
To The Wild Country,1977,Album 1
Dreams,1982,Album 1
Forest Lawn,1970,Album 1
Got My Heart Set On You,1985,Album 1
Tradewinds,1977,Album 1
Circus,1969,Album 1
Eagles & Horses,1990,Album 1
Flight (The Higher We Fly),1983,Album 1
Life Is So Good,1979,Album 1
The Ballad Of St. Anne's Reel,1980,Album 1
Hold On To Me,1991,Album 1
The Harder They Fall,1985,Album 1
What One Man Can Do,1982,Album 1
Johnny B. Goode,1979,Album 1
Shanghai Breezes,1982,Album 1
Take Me Home - Country Roads,1971,Album 1
Wrangell Mountain Song,1980,Album 1
A Wild Heart Looking For A Home,1985,Album 1
Wild Montana Skies,1983,Album 1
Heart To Heart,1982,Album 1
Relatively Speaking,1982,Album 1
Gospel Changes,1971,Album 1
Around And Around,1971,Album 1
Druthers,1977,Album 1
Garden Song,1979,Album 1

Файл styles.css (поместите в root веб-каталог или отредактируйте <link rel='stylesheet' href='/styles.css'> и укажите href на правильное расположение styles.css файла - отредактируйте основной perl файл с формой) 

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 4px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...