Question

我尽可能地减少了代码。它是向Flask后端发送的Ajax帖子，用于使用select2药盒（https://select2.org/）渲染新页面（render_template）。

在这种组合下，无法通过鼠标滚轮在Chrome中运行（仅在Chrome中）。但是，它可以通过上一页/下一页来工作。

如果直接调用index.html，则效果很好。所以我希望我的Ajax帖子有误。有什么建议吗？

app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/", methods=['GET'])
def main():
    return render_template('main.html')

@app.route("/index", methods=['POST', 'GET'])
def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.run('localhost', 8080, debug=True)

main.html

<!DOCTYPE html>
<html>
    <body>
        <a href="{{ url_for('index') }}">direct get -> mouse wheel works</a>
        <br>
        <button onclick="myFunction()">Ajax post -> mouse wheel does not work</button>
    </body>
    <script>
        function myFunction() {
            var formData = new FormData();
            var xhr = new XMLHttpRequest();
            xhr.open('POST', "{{ url_for('index') }}", true);
            xhr.onreadystatechange = function() {
                if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
                    document.write(xhr.responseText);
                    document.close();
                }
            }
            xhr.send(formData);
        };
    </script>
</html>

index.html

<html>
<head>
    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <!-- pillbox -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>        
    <script>
            $(document).ready(function() { 
                    $("#attendees").select2();
            });
    </script>
</head>
<body>
    <select class="select-responsive" name="attendees" id="attendees" style="width: 100%" multiple="multiple" >
            <option value="test">test</option>
    </select>

    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
</body>

select2，带有Flask的Ajax帖子-鼠标滚轮在Chrome中不起作用

0 个答案: