Question

我正在用flask创建一个Web应用程序，该应用程序从表单中获取提交的值，并将其发送到python函数，然后将响应返回给html。

main.py：

app = Flask(__name__)


@app.route('/')
def index():
    return render_template("index.html")


@app.route('/', methods=['POST'])
def search_form():
    print(request.form)
    x = request.form['searchinput']

    a = Vbulletin(x)

    #a.reg_ver()

    def result_gen():
        return a.reg_ver()
    result_gen()

    temp = []

    for s in result_gen():
        text = s
        print(text)

我想使用ajax将表单发送到flask。我知道我可以使用html处理表单，但我想弄清楚如何使用Ajax。

index.html：

<!DOCTYPE html>
<html>
    <head>
        <title>UserFind Home</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
        <script type="text/javascript" src="{{ url_for('static', filename='search.js') }}"></script>
    </head>
    <body>
        <nav>
            <ul id="navlist">
                <h1>Userfind</h1>
                <li><a class="btn" href="#home">Home</a></li>
                <li><a class="btn" href="#contact">Contact</a></li>
                <li><a class="btn" href="#about">About</a></li>
                <form name=searchbar>
                    <ul id="navsearch">
                        <li class="search">
                            <input type="text" id="searchinput" name="searchinput" placeholder="Search for User here. Must be atleast 5 characters long.">
                        </li>
                        <li><button type="submit" class="btn-default">Submit</button></li>
                    </ul>
                </form>
            </ul>
        </nav>

        <p>{{ text }}</p>

        <div class="footer">
            <p>&copy;2019 Userfind</p>
          </div>
    </body>
</html>

我知道我可以添加如下方法：

            <form method="POST" name=searchbar>

但是我试图学习如何使用jquery / ajax。

search.js：

$（document）.ready（function（）{

$('form').on('submit', function(event) {

event.preventDefault();

    $.ajax({
        data : {
            x : $('#searchinput').val(),
        console.log(x)
        },
        type : 'POST',
        url : '/'
    .done(function(data) {


        if (data.error) {
            $('#errorAlert').text(data.error).show();
            $('#successAlert').hide();
        }
        else {
            $('#successAlert').text(data.x).show();
            $('#errorAlert').hide();
        }

    });


});
});

我尝试了几种不同的方法，但从未调用过ajax。当我检查html时，表单上也没有ajax。它只是发送一个获取请求。那么如何解决此问题，以便在我提交表单时调用AJAX？

Answer 1

$('form').on('click', function(event) {
  event.preventDefault();
  $.ajax({
    data: {
      x: $('#searchinput').val()
    },
    type: 'POST',
    url: '/',
    success: function() {
      if (data.error) {
        $('#errorAlert').text(data.error).show();
        $('#successAlert').hide();
      } else {
        $('#successAlert').text(data.x).show();
        $('#errorAlert').hide();
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>UserFind Home</title>

  <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
  <script type="text/javascript" src="{{ url_for('static', filename='search.js') }}"></script>
</head>

<body>
  <nav>
    <ul id="navlist">
      <h1>Userfind</h1>
      <li><a class="btn" href="#home">Home</a></li>
      <li><a class="btn" href="#contact">Contact</a></li>
      <li><a class="btn" href="#about">About</a></li>
      <form method="POST" name="searchbar">
        <ul id="navsearch">
          <li class="search">
            <input type="text" id="searchinput" name="searchinput" placeholder="Search for User here. Must be atleast 5 characters long.">
          </li>
          <li><button type="button" class="btn-default">Submit</button></li>
        </ul>
      </form>
    </ul>
  </nav>

  <p>{{ text }}</p>

  <div class="footer">
    <p>&copy;2019 Userfind</p>
  </div>
</body>

</html>

Answer 2

我将代码设置为单击表单而不是按钮。

我更改了：

$('form').on('click', function(event)

对此：

 $("#submit").click(function(e)

在烧瓶中，我还必须更改：

x = request.form['searchinput']

收件人：

x = request.form['id']

因为那是将数据原样传递到烧瓶的原因。

最后，js看起来像这样：

    $(document).ready(function(){
   $("#submit").click(function(e){
        e.preventDefault();
        $.ajax({type: "POST",
            url: "/",
            data: { id: $("#searchinput").val()},
            success:function(){
                alert("POST was sent.");
            }
        })
  });
});

Flask：提交表单时为什么不调用AJAX？

2 个答案: