个人中心
gpt4 book ai didi

javascript - Flask:为什么定义变量时ajax数据的内容会改变？

转载 作者：行者123 更新时间：2023-12-02 22:55:55 27 4
gpt4 key购买 nike

我正在制作一个 flask 应用程序。用户提交一个表单，该表单被发送到flask。某事已完成，然后我想通过附加 <li> 返回结果在 <ul> .

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

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

    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 render_template("index.html", temp=temp)

这不是从列表中附加项目的完整 jquery。但是当我定义变量(即无序列表)时，它会更改我的发布请求。

$(document).ready(function(){
   $("#submit").click(function(e){
        e.preventDefault();
        $.ajax({type: "POST",
            url: "/",
            data: ({ id: $("#searchinput").val()},
            const resultList = document.getElementById("resultList")
            //let results =  {{ temp|tojson}};
            success:function(){
                alert("POST was sent.");
            }
        })
  });
});

如果没有定义“结果列表”，它会在我的发布请求中发送数据，如下所示:

ImmutableMultiDict([('id', 'monkey')])

但是当我定义“结果列表”时，它发送的数据如下:

ImmutableMultiDict([('searchinput', 'monkey')])

因此，不是发送“id”，而是发送表单上输入的 id。我怎样才能解决这个问题？我还将包含 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>

        <ul id="resultList"></ul>

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

最佳答案

这里有很多问题。

1) 您的 ajax 调用看起来错误。

    $.ajax({type: "POST",
        url: "/",
        data: ({ id: $("#searchinput").val()},
        const resultList = document.getElementById("resultList")
        //let results =  {{ temp|tojson}};
        success:function(){
            alert("POST was sent.");
        }
    })

我不确定你想用这两行做什么。为什么要在函数参数中定义变量？另外，您正在将 vanillaJS 与 jQuery 混合在一起......

const resultList = document.getElementById("resultList")
//let results = {{ temp|tojson}};

我将猜测并说 resultList应该在你的 success 中定义函数，以便您可以附加到它。

2)您正在混合 AJAX 和服务器端渲染...虽然可以做到这一点，但我想这不是您想要做的。一般来说，AJAX 调用仅用于检索数据(现在通常采用 JSON 格式)，而不是检索模板化 HTML。

据我所知，你应该返回 temp从你的 flask 路线作为 JSON 并使用该数据附加一个新的 <li>使用 jQuery 的元素。

TLDR

您可能需要决定是否要使用 render_template 并再次加载页面，或者是否要进行 AJAX 调用并使用 jQuery 更新 DOM。

非常值得您花时间了解有关客户端与服务器端渲染的更多信息。

关于javascript - Flask:为什么定义变量时ajax数据的内容会改变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57983318/

27 4 0
文章推荐： Javascript if/else 不工作。 Odin项目的石头、剪刀、布
文章推荐： Powershell 跳过数组中的元素，如果它为空
文章推荐： regex - 在Elasticsearch中使用正则表达式在匹配查询中斜杠不起作用
文章推荐： javascript - 如何解决平板电脑上的 col-md 无法正确显示的问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com