时间戳

首页 > 解决方案 > 将 Jquery 中的提示变量传递给 Flask

jquery - 将 Jquery 中的提示变量传递给 Flask

问题描述

我正在显示用户必须批准或拒绝的订单。如果他们拒绝它，我会询问拒绝的原因，并且我想将该值传递给我的烧瓶视图函数。

拒绝按钮的 HTML：

<a id=Rejection href="{{ url_for('main.order_management', order_id=order.id, action='toReject' ) }}">
   <button id="motivo" name="motivo" class="btn btn-danger" style="margin-left: 50px" > Reject </button>
</a>

得到原因的Jquery：

  $('#Rejection').on('click', function () {
            var reason = prompt("Motivo del Rechazo: ");
            $("#motivo").val(reason);
 
            
        });

和视图功能：

@bp.route('/orden/gestion/<order_id>', methods=['GET', 'POST'])
def order_management(order_id):
    accion = request.args.get('action')
     if accion == 'toReject':
           flash('Motivo: {}'.format(request.form.get('motivo')))
           // Do something

如何将 Jquery 中提示变量的值 pf 传递给我的 Flask？

谢谢你的帮助！！

标签： jqueryflask

解决方案

很难使用给定​​的信息来显示既满足您的要求又面向目标的路径。
我不确定你有正确的方法。不过，在下文中，我将尝试根据您的代码为您提供可能的解决方案。

@bp.route('/order/manage/<int:order_id>', methods=['POST'])
def order_management(order_id):
    action = request.args.get('action')
    if action == 'reject':
        reason = request.form.get('reason')
        # Your code here!
        return make_response('')
    abort(400)

此变体使用异步 javascript (AJAX)。因此，必须执行收到反应时的行为。浏览器对此没有标准行为。

<a id="rejection-{{order.id}}" href="{{ url_for('main.order_management', order_id=order.id, action='reject') }}">Reject</a>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
  // Wait for the content to load.
  $(document).ready(function() {
    // For every anchor with an id that starts with 'rejection' ...
    $("a[id^='rejection']").each(function() {
      // ... register a listener for a click event.
      $(this).click(function(event) {
        // Prevent the standard behavior.
        event.preventDefault();

        // Ask the user for input and return after canceling.
        let reason = prompt("Reason to reject:");
        if (reason === null) return;

        // Send the data as a form using an ajax post request.
        $.post(this.href, { "reason": reason })
          .done(function() {
            // The transfer was successful.
            console.log("Finished rejection");
          });
      });
    });
  });
</script>

以下是在不使用异步 javascript (AJAX) 的情况下通过表单传输数据的简单替代方法。

<form
  name="rejection-{{order.id}}"
  action="{{ url_for('main.order_management', order_id=order.id, action='reject') }}"
  method="POST"
>
  <input type="hidden" name="reason" />
  <button type="submit">Reject</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
// Wait for the content to load.
$(document).ready(function() {
  // For every form with a name that starts with 'rejection' ...
  $("form[name^='rejection']").each(function() {
    // ... register a listener for a submit event.
    $(this).submit(function(event) {
      // Prevent the standard behavior.
      event.preventDefault();

      // Ask the user for input and return after canceling.
      let reason = prompt("Reason to reject:");
      if (reason === null) return;

      // Set the value of the form field and submit the form.
      this.reason.value = reason;
      this.submit();
    });
  });
});
</script>

也许它可以帮助你。玩得开心。

推荐阅读