检索要在 Perl 中使用的 Javascript 变量

Question

我有一个类似这样的 html 表格：

<table class="notices-table" width="100%" cellpadding="0" cellspacing="0" border="0">
       <% foreach my $notice (@regular_posts) { %>
       <form method = "post" id = "post-form-<%= $notice->notice_id()%>">
       <tr class = "click-post" href = "<%= $notice->link() %>">
            <td><b>Date Posted: </b> <%= '' . (split(/\./, $notice->created()))[0] %><br/>
            <b>Title: </b><%= $notice->title() %><br/><br/>
            <%= $notice->content() %>
            </td>
            <td><button class = "archive-button" id="archive-button">Archive</button></td>
       </tr>
       <input type="hidden" id="action" name="action" value="archive" />
       </form>
       <% } %>
</table>

然后我有一个javascript代码，当每个尝试检索“notice_id”的“归档”按钮被点击时触发：

$(document).ready(function() {
$('button.archive-button').bind('click', function() {
    var id = $(this).attr('id');
    var parts = id.split(/-/);
    var notice_id = parts[2];
    var post_form_id = '#post-form-' + notice_id; 

    $(post_form_id).submit();

    var path_name = window.location.pathname;
    $.ajax(path_name, {
        type: 'POST'
        data: {
            'notice_id2' : notice_id
        },
        success: function(data) {
            console.log('/takeNotice called successfully:');
            console.log(data);
        },
        error: function(jqXHR, textStatus, err) {
            console.error('/takeNotice call failed:');
            console.error(err);
        }
    });

    return false;
});

});

我想将“notice_id”传递给 Perl 脚本，该脚本将使用该 id 从数据库中检索正确的帖子，以便将其存档：

my $cgi = CGI->new;
my $notice_id = $cgi->param("notice_id2");
my $form = $Request->Params();
my $notice;
eval {
    $notice = Taskman::Notice->new(notice_id => $notice_id);
};

我对 Perl 和 Javascript/Ajax 还很陌生，所以我可能在这里遇到更多问题。任何见解都会很棒。谢谢

已编辑 我对我的代码做了一些修改。 Ajax 似乎在工作，但我不知道我是否仍在正确调用它。脚本在同一页面上。我仍在检索错误的“notice_id”

Answer 1

您的方法基本上没有问题，但您没有正确调用$.ajax，这将阻止任何工作。

具体来说，您没有为您的 Perl 脚本提供 URL。举例来说，我假设您的 Perl 脚本位于路径 /takeNotice （聪明，不是吗？）。你可以这样称呼它：

$.ajax('/takeNotice', {
    type: 'POST',
    data: {
        notice_id2 : notice_id
    },
    success: function(data) {
        console.log('/takeNotice called successfully:');
        console.log(data);
    },
    error: function(jqXHR, textStatus, err) {
        console.error('/takeNotice call failed:');
        console.error(err);
    }
});

success 和 error 函数并不是绝对必要的，但包含它们是个好主意，当然，当您学习时，它确实有助于理解前端逻辑的流程。

说到这里，你可能还应该在这段代码中添加一些错误处理：

var parts = id.split(/-/);
var notice_id = parts[2];
var post_form_id = '#post-form-' + notice_id; 

如果 ID 不是您期望的格式，您最终会得到 post_form_id 或 "#post-form-undefined。一些错误处理和控制台日志记录在这里会很有用。

最后，这一行什么都不做：

$(post_form_id '#action').val('archive');

如果您尝试设置该值，则需要第二个参数。如果您尝试获取该值，则可能应该将其分配给某物。