Question

我正在申请烧瓶。用户提交一个表单，该表单将发送到flask。事情已经完成，我正在尝试使用jquery（定义为temp）将结果发送回html。我想使用jquery，因为最终我想动态地添加到flask的无序列表中。

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


@app.route('/search', methods=['GET', 'POST'])
def search_form():
    print(request.form)
    x = request.form['id']
    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)
        temp.append(text)
    print(temp)


    return jsonify(temp)

forumsearch.js：

$(document).ready(function(){
   $("#submit").on('click',function(e){
        e.preventDefault();
        req = $.ajax({type: "POST",
            url: "/search",
            data: { id: $("#searchinput").val()},
            //const resultList = document.getElementById("resultList")
         });
        req.done(function(e){
            alert("POST was sent.");
            $('#resultList').text(temp);

            });
       });
  });

index.html：

<!DOCTYPE html>
<html>
    <head>
        <title>UserFind Home</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
        <script type="text/javascript" src="{{ url_for('static', filename='forumsearch.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="submit" id="submit" class="btn-default">Submit</button></li>
                    </ul>
                </form>
            </ul>
        </nav>
        <script>

            var btnContainer = document.getElementById("navlist");
            var btns = btnContainer.getElementsByClassName("btn");

            for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function() {
            var current = document.getElementsByClassName("active");

            if (current.length > 0) {
            current[0].className = current[0].className.replace(" active", "");
            }
            this.className += " active";
                });
            }
            </script>

        <p id="resultList">{{ temp }}</p>

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

我试图编写代码，所以当POST请求完成时，jquery将'temp'变量传递给html。但是html源代码中没有'temp'。

控制台显示：

ReferenceError：未定义临时体forumsearch.js：11：13

这是这行：

    $('#resultList').text(temp);

那么我该如何定义temp使其显示在页面上（使用jquery）？

为什么Flask变量没有传递给html？

0 个答案: