如何向django服务器提交html表单数据并使用ajax实时显示输出

Question

我需要能够实现表单提交和显示，如这。我的html表单没有提交按钮，我使用jquery检测每个input字段中的input事件，然后提交表单数据。目标是让用户在第二个表单输入字段中输入实时output of the calculation updated。

但是，已经做了研究，但没有发现任何文章或类似的实现，这是在链接中引用的。

问题：

我的ajax代码目前能够提交表单数据，但它强制用户单击页面中的其他地方，以便表单数据被提交并自动显示。

django视图中的httpresponse在空白的白色html选项卡中打印原始输出。

计算由python函数后端处理。如何欺骗我的代码，使其具有与链接中引用的行为相同的行为。

到目前为止，我的模板和jquery：

{% 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码

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

Answer 1

您应该使用keyup事件类型而不是change类型。

根据JQuery文档

当元素的值发生变化时，change事件被发送到元素。此事件仅限于元素、框和元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时，事件将立即触发，但对于其他元素类型，事件将延迟到，直到该元素失去焦点。

如果它对你有用的话，请接受它作为回答，谢谢！