Javascript 烧瓶：为什么不是'；提交表单时是否调用AJAX？_Javascript_Python_Jquery_Ajax_Flask

Javascript 烧瓶：为什么不是'；提交表单时是否调用AJAX？

javascript python jquery ajax flask

Javascript 烧瓶：为什么不是'；提交表单时是否调用AJAX？,javascript,python,jquery,ajax,flask,Javascript,Python,Jquery,Ajax,Flask,我正在使用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)

我正在使用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>

我尝试过几种不同的方法，但ajax从来都不是调用。当我检查html时，表单上也没有ajax。它只是发送一个get请求。那么，当我提交表单时，如何解决这个问题，从而调用AJAX呢？

$（'form'）。在（'click'，函数（事件）{
event.preventDefault（）；
$.ajax({
数据：{
x:$（'#searchinput'）.val（）
},
键入：“POST”，
url:“/”，
成功：函数（）{
if（data.error）{
$（'#errorAlert'）.text（data.error）.show（）；
$（'successAlert'）.hide（）；
}否则{
$（'#successAlert'）.text（data.x）.show（）；
$（'#errorAlert'）.hide（）；
}
}
});
});

用户找到家

用户查找






提交


{{text}}
&抄袭；2019用户查找
我的代码设置为单击表单而不是按钮
我改变了：
$('form').on('click', function(event)

为此：
 $("#submit").click(function(e)

在烧瓶中，我还必须更换：
x = request.form['searchinput']

致：
因为这就是传递给flask的数据
最后js看起来是这样的：
    $(document).ready(function(){
   $("#submit").click(function(e){
        e.preventDefault();
        $.ajax({type: "POST",
            url: "/",
            data: { id: $("#searchinput").val()},
            success:function(){
                alert("POST was sent.");
            }
        })
  });
});

数据：{x:$（'#searchinput'）.val（），console.log（x）}，。不，控制台中没有显示任何内容。根据您的注释和描述，我认为您需要将ajax调用集成到form post方法中，这就是我在代码中使用ajax调用的原因。这没关系，但用户有一些信息，所以答案应该是相同的。感谢您的回答，请从您的代码片段中查看它的工作原理，但由于某些原因，即使我将代码复制到文件中，表单也无法调用ajax。为什么会这样？
x = request.form['searchinput']

x = request.form['id']

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