使用 Ajax 和 Jquery 时部分空 POST 或 QueryDict

Question

我有一个 django 表单，用于发布项目、状态和 ID 的数据

class TemplateDataForm(forms.ModelForm):
item = forms.CharField(widget=forms.TextInput(attrs={'id':'temp_item'}))
status = forms.ChoiceField(label='', choices=CHOICES, widget=forms.Select(attrs={'id':'status'}))

class Meta:
    model = TempData
    fields = ['item','status']

我正在将诸如 id 之类的属性传递给表单中的字段

        <form method='post' id='js-temp-data'>
        {% csrf_token %}
        {% for hidden_field in temp_data_form.hidden_fields %}
            {{hidden_field.errors}}
            {{hidden_field}}
        {% endfor %}
        <div class="form-row align-items-center">
        {% for field in temp_data_form.visible_fields %}

            <div class="col-auto">
                {{field.label_tag}}
                {{field.errors}}
                {{field}}
                {{field.help_text}}
            </div>

        {% endfor %}
            <div class="col-auto">
            <input type="hidden" id='js_template_id_new' name="" value="{{temp_obj_for_template.id}}">
            <!-- <input type="image" src="{% static 'components/plus1.png'%}" width=15 heigth=15 name="submit" alt='Submit' value="Add"> -->
            <input type="submit" id='js-temp-data-submit' value="submit" name="">
            </div>
        </div>
    </form>

我在下面的 Jquery 中使用输入标签的 css id，但它没有获取输入值并为标题和 id 发布空响应

    <script type="text/javascript">
    $(document).ready(function(){
        $('#js-temp-data-submit').click(function(e) {
        e.preventDefault();
        $.ajax({
            type:'POST',
            url:'{% url "checklist" %}',
            data:{
                item:$('#temp_item').val(), //not working
                id:$("#js_template_id_new").val(), //I'm passing the object to template from view which is working for other form but not for this
                status:$('#status').val(), //working
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(), //working
                action:'post'
            },
            success: function(response){
                $("#js-temp-data").trigger('reset');
                $('#js-temp-data').focus();
            },
            error: function(response){
                alert(response["responseJSON"]["error"])
            }
        });
    });
});
</script>

下面是 request.POST 的输出，我可以在其中获取状态和 csrf 令牌的值，但不能获取标题值

<QueryDict: {'item': [''], 'id': [''], 'status': ['Y'], 'csrfmiddlewaretoken': ['k8QOiu89labeDNQupX6Zw5fEwUyf1KylPayf3xisYTLX6dseBXsGaVeAdLYLgGH0'], 'action': ['post']}>

我做错了，我尝试使用结果相同的 form-id，然后使用也给出相同结果的输入提交 id

Answer 1

最后我能够解决上述问题，在我的脚本中，我使用提交 ID 来执行点击操作，所以我使用以下代码进行了修改

    <script type="text/javascript">
    $(document).ready(function(){
       //using the form id and checking on submit action of it
        $('#js-temp-data-form').on('submit', function(e) {
        e.preventDefault();
        //storing the item in a variable and assign to the item in data dict 
        var item = $('#js_temp_item').val();
        var id = $('#js_template_id').val();
        // console.log($("#js_template_id").val());
        $.ajax({
            type:'POST',
            url:'{% url "checklist" %}',
            data:{
                item:item,
                temp_id:id,
                status:$('#status').val(),
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
                action:'post'
            },
            success: function(response){
                $("#js-temp-data").trigger('reset');
                $('#js-temp-data').focus();
            },
            error: function(response){
                alert(response["responseJSON"]["error"])
            }
        });
    });
});
</script>

修改脚本后，我可以看到 request.POST 数据，其中包含我正在寻找的详细信息

<QueryDict: {'item': ['Paste'], 'temp_id': ['120'], 'status': ['I'], 'csrfmiddlewaretoken': ['nmvCsEpLqMwtH0xdooZPfyWbBq2NORuT5pO2ZOLiJZIQA11RSGLNtKxblBL7BmiF'], 'action': ['post']}>