Как отправить данные html-формы на сервер django и отобразить результат в реальном времени с помощью ajax

Мне нужно реализовать отправку и отображение формы по типу this. Моя html форма не имеет кнопки отправки, я использую jquery для обнаружения события onchange в каждом input поле, затем отправляю данные формы. Цель состоит в том, чтобы output of the calculation updated в реальном времени, когда пользователь набирает текст во втором поле ввода формы.

Провел исследование, но не нашел ни одной статьи или подобной реализации, как это указано в ссылке.

Проблемы:

В настоящее время мой ajax-код способен отправлять данные формы, но он заставляет пользователя щелкнуть в другом месте страницы, чтобы данные формы были отправлены и автоматически выведены на экран. (Опять же не так, как ожидалось)

httpresponse из django view печатает необработанный вывод в пустой белой html-таблице.

Вычисления выполняются с помощью функции python back-end. Как я могу обмануть свой код, чтобы он имел такое же поведение, как и тот, что приведен в ссылке.

мой шаблон и jquery ajax на данный момент:

{% extends "base.html" %}
{% block title %}Two Way True Odd Finder{% endblock %}
{% block content %}
<script type="text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    
      
      $("#Odd1").on("change",function(){
        if($("#Odd2").value !== "") {
           $("#Odd2").on("change", function(){

             $('#myform').submit()


             $.ajax({
            type: "GET",
            url: "{% url 'two_way_calc' %}",
            datatype: "json",
            success: function(data){
              console.log(data)
              // update DOM element with my view returned data
            }
          });


           });

        }
   });

 
  
  });

</script>



    <div class="container m-5">

      <a href="{% url 'dashboard' %}" class="btn btn-primary">Dashboard Home</a>

      <a href="{% url 'index' %}" class="btn btn-primary">3  Way True Odds Finder Calculator</a>

        
    </div>



<div class="container m-5 text-justify">
    <div class="row">
      <div class="col-4">
        <form action="" method="post" id="myform">
          {% csrf_token %}
          <div class="mb-3">
              <label for="Odd1" class="form-label">Odd 1</label>
              <input type="number" class="form-control" name="odd1" id="Odd1" min=" " value=" " step=".001" required='required'>
            </div>
          <div class="mb-3">
            <label for="Odd2" class="form-label">Odd 2</label>
            <input type="number" class="form-control" name="odd2" id="Odd2" min=" " value=" " step=".001" required='required'>
          </div>
         
          <!--<button type="submit" class="btn btn-primary">Submit</button>-->
          
        </form>

мой вид django

def two_way_calc(request):
    if request.method == 'POST':
        odd1 = float(request.POST.get('odd1'))
        odd2 = float(request.POST.get('odd2'))

        func_def = odd_finder_true_2(odd1, odd2)

        context = {
            'Juice': func_def['Juice'],
            'TotalImpliedProbability': func_def['TotalImpliedProbability'],
            'HomeOdd': func_def['HomeOdd'],
          
            'AwayOdd': func_def['AwayOdd'],
            'Home_True_Odd': func_def['Home_True_Odd'],
           
            'Away_True_Odd': func_def['Away_True_Odd'],
            'True_Probability': func_def['True_Probability'],
            'Home_implied_probability': func_def['Home_implied_probability'],
            
            'Away_implied_probability': func_def['Away_implied_probability'],
            'Inverted_Probability': func_def['Inverted_Probability'],
            }
        # return render(request, 'three_way_temp.html', context)
        return JsonResponse(context)
    else:
        return render(request, 'three_way_temp.html', {})

url py code

urlpatterns = [
    path('', views.index, name='index'),
    path('two_way_calc/', views.two_way_calc, name='two_way_calc'),
]

python функция

def odd_finder_true_2(first_odd, second_odd):
    home_implied_probability = round((100/first_odd), 2)
    away_implied_probability = round((100/second_odd), 2)
    
    total_implied_probability = home_implied_probability + away_implied_probability
    
    
    inverted = (100/total_implied_probability) * 100
    
    juice = total_implied_probability - inverted

    hundred_odd_home = total_implied_probability/home_implied_probability
    hundred_odd_away = total_implied_probability/away_implied_probability
    prob_true = 1/(round(hundred_odd_home, 2)) + 1/(round(hundred_odd_away, 2))
    
    my_dict_two = {
        'Juice': round(juice, 2),
        'TotalImpliedProbability': round(total_implied_probability, 2),
        'HomeOdd': first_odd,
        'AwayOdd': second_odd,
        'Home_True_Odd': round(hundred_odd_home, 2),
        'Away_True_Odd': round(hundred_odd_away, 2),
        'True_Probability': round(prob_true, 1),
        'Home_implied_probability': home_implied_probability,
        'Away_implied_probability': away_implied_probability,
        'Inverted_Probability': round(inverted, 2)

    }
    
    
    return my_dict_two

Вернуться на верх