Частично пустой POST или QueryDict при работе с Ajax и Jquery - PullRequest
Новая
       5

Частично пустой POST или QueryDict при работе с Ajax и Jquery

0 голосов
/ 11 февраля 2020

У меня есть форма django, которую я использую для публикации данных элемента, статуса и идентификатора 

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>

Я использую идентификатор css тегов ввода ниже Jquery, но он не собирает входные значения и не публикует пустой ответ для заголовка и идентификатора 

    <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']}>

, где я делаю неправильно, я пытался используя идентификатор формы, который привел к тому же результату, а затем используя идентификатор ввода ввода, который также дает тот же результат

1 Ответ

0 голосов
/ 14 февраля 2020

Наконец-то я смог исправить вышеуказанную проблему, в моем скрипте я использовал идентификатор отправки для выполнения действия щелчка, поэтому я изменил код ниже 

    <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']}>
...