如何用带有js/jQuery的电报机器人以html的形式发送照片?

2022-04-13 00:00:00 telegram-bot web jquery javascript laravel

之前,我有一些类似于向用户发送消息的代码

<button class="notif btn btn-success"
href="https://api.telegram.org/bot{{ config('app.token') }}/sendMessage?chat_id={{ $rp->report_idsender }}&text=Halo%20{{ $rp->sender_name }}%20permintaan%20anda%20dengan%20id%20{{ $rp->id }}%20sudah%20di%20close%20">Notif</button>

我正在使用jQuery&;js从href获取URL并执行HTTPS POST请求,它非常适合我

<script type="text/javascript">
$(".notif").unbind().click(function() {
var url = $(this).attr("href");
console.log(url);
var exe = $.post(url, function() {
alert('Success');
})
});
</script>

但现在我想用回复ID向Telegram上的一个群发送一张照片,代码如下:

<form method="POST"
action="https://api.telegram.org/bot{{ config('app.token') }}/sendPhoto" enctype="multipart/form-data">
<input type="text" name="chat_id" value="{{ config('app.idgroup') }}" hidden />
<input type="text" name="reply_to_message_id" value="{{ $rp->msg_id }}" hidden />
<input type="text" name="allow_sending_without_reply" value="true" hidden />
<br />
<label for="caption"> Caption</label>
<input type="text" name="caption" placeholder="caption" />
<br />
<input type="file" name="photo" />
<br />
<input type="submit" value="sendPhoto" />
</form>

此代码的问题在于,在我提交表单后,它会打开一个包含JSON响应的页面,而我只是想像在前面的代码中那样提醒它。

json response tab picture

问题是,我如何使用URL中带有回复ID的js/jQuery发送带有电报机器人的表单的照片?


解决方案

您的代码运行正常,但在action中设置的重定向到页面时,您可以使用以下代码来阻止默认的提交按钮行为和AJAX停留在同一页面并显示成功消息。

<script type="text/javascript">
    $(document).on("submit", "form", function (event) {
        event.preventDefault();
        $.ajax({
            url: $(this).attr("action"),
            type: $(this).attr("method"),
            dataType: "JSON",
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (data, status) {
                alert('Success');
            },
            error: function (xhr, desc, err) {
                alert('Error');
            }
        });
    });
</script>

将此代码添加到页面的标题部分。

相关文章