Javascript 为什么在使用ajax显示数据之前需要刷新页面？

我使用flask wtforms提交数据，并尝试使用ajax，以便提交数据后确实需要刷新页面。但当我提交数据时，它会添加到数据库中，但不会显示在前端。然后，当我刷新页面时，将显示数据

html:

我试图对此进行研究，然后我看到，似乎我有相同的方法，但我的代码不起作用。在显示到我的页面之前，它总是需要刷新。有人能帮忙吗

<tbody class="table-output">
                        {% for post in posted_expenses %}
                            <tr>
                                <td>{{ post.id }}</td>
                                <td>{{ post.categories }}</td>
                                <td>{{ "{:,.2f}".format(post.category_cost|float) }}</td>
                                <td>{{ post.category_date.strftime('%Y-%m-%d') }}</td>
                                <td><a href="{{ url_for('edit', expense_id=post.id )}}" class="edit">Edit</a><a href="{{ url_for('delete', expense_id=post.id )}}" class="delete">Delete</a></td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </main>
        <div class="popup">
            <div class="popup-content">
                <i class="far fa-times-circle close"></i>
                <form action="" method="POST">
                    {{ form.csrf_token }}
                    <div class="table-input">
                        <div class="expense-form">
                            <div class="categories">
                                {{ form.categories.label }}
                                {{ form.categories(class="add-categories", id="category") }}
                            </div>
                            <div class="cost">
                                {{ form.cost.label }}
                                {{ form.cost(class="add-cost", id="cost") }}
                            </div>
                            <div class="submit">
                                {{ form.submit(class="add-expense", id="submit") }}
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var csrf_token = "{{ csrf_token() }}";
    </script>
    <script src="{{ url_for('static', filename='js/add_expense.js')}}"></script>

@app.route("/expenses/<int:budget_id>", methods=['GET', 'POST'])
def expenses(budget_id):
    form = ExpenseForm()
    budget = Budgets.query.get(budget_id)
    posted_expenses = Expenses.query.filter_by(budget_id=budget.id)
    return render_template("expenses.html", budget=budget, form=form, posted_expenses=posted_expenses)

@app.route("/add_expense/<int:budget_id>", methods=['GET', 'POST'])
def add_expense(budget_id):
    form = ExpenseForm()
    total_savings = 0
    budget = Budgets.query.get(budget_id)
    if form.validate_on_submit():
        if form.categories.data == '':
            return redirect(url_for('expenses', budget_id=budget.id))
        else:
            budget_expense = Expenses(categories=form.categories.data, category_cost=form.cost.data, budget_id=budget.id)
            total_savings = budget.new_budget - form.cost.data
            budget.new_budget = total_savings
            db.session.add(budget_expense)
            db.session.commit()
            return redirect(url_for('expenses', budget_id=budget.id))

    return jsonify('success')

$(function() {
    $('form').on('submit', function(event) {
        event.preventDefault();
        var budget_id = window.location.href
        var splits = budget_id.split('/')
        var id = (splits[splits.length-1])
        console.log(id)
        $.ajax({
            data : $('form').serialize(),
            type: 'POST',
            url: '/add_expense/' + id,
            success: function(data) {
                $('.popup').css({display:'none'})
                $('form').serialize()
                if (data=='sucess') {
                    window.location.href = '/expenses/' + id;
                }
                
                
            }
        })
    })
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrf_token);
            }
        }
    });

})