Response sem recarregar a página - Flask e JS

Bom dia, pessoal. Estou criando um projeto pessoal em Flask e a minha primeira etapa é fazer um cálculo relativamente simples de conversão de densidade de petróleos pela temperatura, retornando o valor de densidade a 20/4 e seu grau API. Quando coloco os inputs, os valores corretos são retornados, mas, em virtude de fazer uma requisição ao servidor, os valores que o usuário coloca no input desaparecem, o que eu não queria que ocorresse. Ou seja, queria que o cálculo fosse feito, retornasse o valor ao cliente na tela, mas mantivesse os valores colocados no input pelo usuário. Vou deixar os códigos que utilizei:

Arquivo Flask - principal.py:

from flask import Flask, render_template, request
from calculo_densidade import*
app = Flask(__name__) #objeto do tipo Flask

@app.route('/',methods=['GET','POST'])
def index():
    api = ''
    rho = ''
    if request.method == "POST":
        rho_i = float(request.form['rho'])
        temp = float(request.form['temp'])
        rho = round(Densidade(rho_i,temp).d_calc()[0],4) 
        api = round(Densidade(rho_i,temp).d_calc()[1],2)
    return render_template('densidade.html',rho=str(rho)+" g/cc",api=str(api)+" API")


if __name__=="__main__":
    app.run(debug=True)

Trecho do arquivo densidade.html

    <link rel="stylesheet" href="{{ url_for('static', filename='densidade.css') }}">

                <form method="POST" action="/" id="myform">
                    <div class="form-row mx-3" style="margin-top: 30px;">
                        <div class="form-group col-lg-6 col-md-6 col-sm-12">
                            <label class="col-form-label col-form-label-lg">Insira a densidade obtida</label>
                            <input type="text" placeholder="em g/cm³" class="form-control form-control-lg rho" id="rho" name="rho">
                        </div>

                        <div class="form-group col-lg-6 col-md-6 col-sm-12">
                            <label class="col-form-label col-form-label-lg">Insira a temperatura do densímetro</label>
                            <input type="text" placeholder="em Celsius" class="form-control form-control-lg temp" id="temp" name="temp">
                        </div>
                    </div>

                    <div class="form-group row text-center justify-content-center my-3">
                        <button class="btn btn-lg dens" type="submit" style="min-width: 200px;">Calcular</button>
                    </div>
                </form>

            <div class="row text-center justify-content-center" style="margin-top: 40px">
                <h2>Resultados obtidos</h2>
            </div>


            <div class="row text-center my-3" id="resultados">
                <h4 class="form-group col-lg-12 col-md-12 col-sm-12" id="densidade_final">   
                    {{ rho }}     
                </h4>

                <h4 class="form-group col-lg-12 col-md-12 col-sm-12" id="API_final">
                    {{ api }}
                </h4>    
            </div>

Tentei usar ajax, mas não deu certo, pois agora os valores calculados não eram retornados ao cliente, apesar de manter o input com os valores colocados pelo usuário.

Meu código:

$("form").on("submit", function (e) {
    var dataString = $(this).serialize();
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "/",
      data: dataString,
      success: function () {
        // Display message back to the user here
        console.log("ok")
      }
    });  
  }
);

Quem puder me ajudar, agradecerei.