Почему мой сервер FLask использует AJAX для запуска кода, перезагружающего страницу при нажатии кнопки, хотя этого не сл ⇐ Jquery

[Anonymous]

Когда я нажимаю кнопку, которая должна в основном обновить график, отображаемый в HTML с использованием сюжета, она должна заменить график, который у меня есть в HTML как {{ CostHTML|safe }} внутри div, чтобы отобразить его, но когда я использую ajax страница будет перезагружаться при ее обновлении, поэтому прокрутите страницу вверх.
Код JavaScript:

Код: Выделить всё

    $(document).ready(function(){

$("#getDataBtn").click(function(event){
$.ajax({
type: "GET",
url: "",
data: { costBins: document.getElementById("costBin").value },
success: function(data){
console.log(data);
$("#costChart").html(data.costHTML);
}
});
});
});

HTML:

Код: Выделить всё

    


Hello, World!





Break to show page refresh -------

Ok


Change Bins

{{ costHTML|safe }}

Python:

Код: Выделить всё

from flask import Flask , render_template , request ,jsonify
import pandas as pd
import plotly.express as px

app = Flask(__name__)

def processData():
df = pd.read_csv("laptopData.csv", encoding="ISO-8859-1")

df["Price"] = df["Price"].str.replace("?", "").str.replace(",", "").astype(float).mul(0.01205028342)
df["Brand"] = df["name"].str.split().str[0].str.capitalize()

dfPrice = df.groupby('Brand').agg({'Price': 'mean'}).reset_index()
dfPrice = dfPrice.sort_values(by="Price", ascending=False).round(2)

dfCounts = df["Price"].round(0).value_counts().reset_index()
dfCounts.columns = ["Price", "Count"]

return dfCounts, dfPrice

def processGraphs(processBins, dfCounts, dfPrice):
costChart = px.histogram(dfCounts, x="Price", nbins=processBins, title="Prices")
costHTML = costChart.to_html(full_html=False, include_plotlyjs="cdn")

return costHTML

@app.route("/", methods=["GET", "POST"])
def home():

dfCounts, dfPrice = processData()
costHTML = processGraphs(100, dfCounts, dfPrice)

if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
print("Updating Graphs")
costHTML = processGraphs(1000, dfCounts, dfPrice)
return jsonify({'costHTML': costHTML})

costHTML = processGraphs(100, dfCounts, dfPrice)
return render_template("index.html", costHTML=costHTML)

app.run()

Итак, когда я заменил это:

Код: Выделить всё

    $("#costChart").html(data.costHTML);

с этим

Код: Выделить всё

    $("#updatedCostChart").html(data.costHTML);

и создал пустой div с соответствующим идентификатором

Код: Выделить всё

Он мог бы добавить диаграмму в этот div и обновить ее без перезагрузки и т. д., но все равно не сработало, как показано в моем коде??
Я также пытался помочь с помощьюchatgpt, но он только продолжал пытаться убедитесь, что я не отправлял кнопку формы, а это не так.
Я почти наверняка упускаю из виду очень небольшую проблему, но я действительно не могу заставить ее работать. Это мой первый пост здесь, поэтому я надеюсь, что добавил достаточно информации, и я попытался сократить свой код как можно больше, но я не хотел ничего ломать в процессе, так что это то, что у меня есть, заранее спасибо за помощь

Подробнее здесь: https://stackoverflow.com/questions/793 ... age-on-but