javascript - django 选择字段值

Question

我在 Django 模型中创建了一个选择字段，但是当我尝试onchange在 HTML 中调用时，ajax 代码不起作用。这是代码。当我单击此表单中的 match_recipient 时，我需要 ajax 上的值，但现在我没有得到该值。有显示undefined价值

模型.py

type = (
('catchall' , 'Catch All'),
('match_recipient','Match Recipient'),
('match_header','Match Header'),
)

class Routes(models.Model):
    expression_type = models.CharField(max_length=10,choices=type,default='catchall')
    actions = models.CharField(max_length=100)
    recipient = models.CharField(max_length=50)
    header_name = models.CharField(max_length=50)
    header_value = models.CharField(max_length=50)
    priority = models.IntegerField()
    user = models.ForeignKey(User, on_delete=models.CASCADE)

表格.py

type = (
('catchall' , 'Catch All'),
('match_recipient','Match Recipient'),
('match_header','Match Header'),
)
class RouteForm(forms.ModelForm):
    expression_type = forms.ChoiceField(choices=type,widget=forms.Select(), required=True)
    actions = forms.CharField(help_text='Required', widget=forms.TextInput(attrs={'placeholder': '[e-mail]'}))
    recipient = forms.CharField(widget=forms.TextInput(attrs={'placeholder': '[e-mail]'}))
    header_name = forms.CharField( widget=forms.TextInput(attrs={'placeholder': 'X-Header-Name'}))
    header_value = forms.CharField( widget=forms.TextInput(attrs={'placeholder': 'Header Value'}))
    priority = forms.IntegerField(initial=0)

    class Meta:
        model = Routes
        fields = ('expression_type','actions','recipient','header_name','header_value','priority',)

模板.html

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
        $("#recipient").hide();
        $("#header_name").hide();
        $("#header_value").hide();
        $("#expression_type").change(function() {
        alert("ededde");
        var a = $(this.text());
        console.log(a);
        alert(a);
            if($(this).val()  == "match_recipient"){
                 $("#recipient").show();
            }else if($(this).val() == "match_header"){
                $("#header_name").show();
                 $("#header_value").show();
            }
        });
     });
</script>
</head>

       <form action="{% url 'route' %}" method="POST">
                {% csrf_token %}
                  <div class="field has-addons">
                      <div class="form-group row" id="expression_type">

                            <label  class="col-sm-2 col-form-label">Expression Type</label>
                            <div class="col-sm-10">
                                {{ form.expression_type }}
                            </div>

                     </div>
                       <div class="form-group row">
                            <label  class="col-sm-2 col-form-label">Action</label>
                            <div class="col-sm-10">
                             {{ form.actions }}
                            </div>
                     </div>
                       <div class="form-group row" id="recipient">
                            <label  class="col-sm-2 col-form-label">Recipient</label>
                            <div class="col-sm-10">
                            {{ form.recipient }}
                            </div>
                     </div>
                       <div class="form-group row" id="header_name">
                            <label  class="col-sm-2 col-form-label">Header Name</label>
                            <div class="col-sm-10">
                              {{ form.header_name }}
                            </div>
                     </div>
                       <div class="form-group row" id="header_value">
                            <label  class="col-sm-2 col-form-label">Header Value</label>
                            <div class="col-sm-10">
                             {{ form.header_value }}
                            </div>
                     </div>
                       <div class="form-group row" id="priority">
                            <label  class="col-sm-2 col-form-label">Priority</label>
                            <div class="col-sm-10">
                              {{ form.priority }}
                            </div>
                     </div>

                        <div class="control">
                            <button class="button is-info">
                                Add Route
                            </button>
                        </div>
                    </div>
  </form>

标签： javascriptpythonajaxdjango