时间戳

首页 > 解决方案 > 烧瓶返回不适用于html代码中的post jquery请求

javascript - 烧瓶返回不适用于html代码中的post jquery请求

问题描述

我遇到了通过 jquery 帖子提交表单的问题。我正在处理表单数据，需要提交具体数据。我无法使用内置 POST，因为没有使用 dataTables 插件提交多个页面，因此我必须在提交之前修改 javascript 中的数据。下面的代码正在执行 'url_for('aws_execute')' 中的代码，但页面没有在浏览器中加载。

所以在这个例子中，'123' 将被打印到 python 控制台，但网站不会被重定向，并且“测试请工作”不会显示在浏览器中。

如果我在发布后执行功能，我可以获得控制台日志或警报等信息，但我不确定如何让页面重定向，因为我希望新页面显示结果而不是警报，等等。任何想法如何做到这一点？

谢谢！

<aws_options.html 页面>

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
      <link href="{{ url_for('static', filename='css/jquery.dataTables.min.css') }}" rel="stylesheet">
      <script src="{{ url_for('static', filename='jquery-3.5.1.js') }}"></script>
      <script src="{{ url_for('static', filename='jquery.dataTables.min.js')}}"></script>
      <script type="text/javascript" charset="utf-8">
      $(document).ready(function() {
          $('#options').on('submit', function(e){
              // Prevent actual form submission
              e.preventDefault();

              var data = table.$('input,select,textarea').serializeArray();
              var data2 = $(this).serializeArray();
              var data3 = $.merge(data,data2);

not working--->$.post({
                 url: '{{ url_for('aws_execute') }}',
                 data: data3

              },
              function(data3,status){
                     alert("Data: " + data3 + "\nStatus: " + status);
              });
          });

      } );
  </script>
  </head>

  <body>

<h1>AWS Options</h1>
<form id="options" method="POST" action="{{ url_for('aws_execute') }}">
  <button type="submit">Submit Form</button>
  (FORM STUFF)
</body>
</html>

在蟒蛇中：

@app.route('/aws_execute', methods=['POST'])
@saml_manager.login_required
def aws_execute():
    print('123')
    return 'test please work'

标签： javascriptpythonjqueryflaskdatatables

解决方案

$.post发出 AJAX 请求，因此对它的任何响应都不会自动呈现。如果您的意图是对您的POST请求呈现响应，为什么不让表单遵循其默认行为（即摆脱所有 jQuery）？

否则，如果您希望它是 AJAX，则需要包含一个回调来指定在您获得数据后如何处理响应中的数据。例如，试试这个，看看它是否记录test please work到您的浏览器控制台：

$.post({
  '{{ url_for('aws_execute') }}',
  data3,
  responseData => console.log(responseData)
});

推荐阅读