Django: данные, отправленные из Ajax в Python, очищаются

Question

Я пытаюсь получить строковые данные, которые отправляются из Ajax в Python. Однако, когда я регистрирую код, данные не отправляются. Оно пустое. Не могли бы вы сказать мне, почему?

p.s. Цель кода - получить имя кнопки подтверждения для проверки в views.py

Javascript

<script type='text/javascript'>
$(".submit-btn").click(function(){
  var button_pressed = JSON.stringify($(this).attr('name'));
  $.ajax({
    url: "{% url 'add_test' %}",
    type: 'POST',
    data: {'button_pressed' : button_pressed, 'csrfmiddlewaretoken': $("[name=csrfmiddlewaretoken]").val()},
  })
});
</script>

views.py

def add_test(request):
    if request.method == 'POST':
        test_name = request.POST.get('test_name')
        test_type = request.POST.get('test_type')
        test_date = request.POST.get('test_date')
        test_obj = Test(test_name = test_name, test_type = test_type, test_date = test_date)
        test_obj.save()
        button_pressed = request.POST.get('button_pressed')
        #button_pressed = json.loads(button_pressed)        
        print button_pressed ,"+++++++++++++++++++++++++++++"
        return HttpResponseRedirect('/test-management/test/')

test_list.html

<form class="form" method="POST" action="{% url 'add_test' %}">
                        {% csrf_token %}
                        <h2>Add Test</h2>
                        <div class="card-body">
                            <div class="form-group bmd-form-group">
                                <div class="input-group">
                                    <p>Name :</p>
                                    <input type="text" class="form-control" id="test_name" name="test_name" placeholder="Test Name...">
                                </div>
                            </div>
                            <div class="form-group bmd-form-group">
                              <div class="input-group">
                                  <p>Type :</p>
                                  <input type="text" class="form-control" id="test_type" name="test_type" placeholder="Test Type...">
                              </div>
                            </div>
                            <div class="form-group bmd-form-group">
                                <div class="input-group">
                                    <p>Date :</p>
                                    <input type="date" class="form-control" id="test_date" name="test_date" placeholder="Test Date...">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-right">
                            <button type="submit" class="btn btn-primary btn-link btn-wd btn-lg" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary btn-link btn-wd btn-lg submit-btn" name="add_new">Add & New</button>
                            <button type="submit" class="btn btn-primary submit-btn" name="add">Add</button>
                        </div>
</form>

Я новичок в Django, так что извините, если вопрос глупый. Спасибо за помощь!

Answer 1

Изменить тип кнопки submit: -

<button type="submit" class="btn btn-primary submit-btn" name="add">Add</button>

до

<button type="button" class="btn btn-primary submit-btn" name="add">Add</button>

Answer 2

Я обнаружил, что мы не можем получить имя кнопки отправки, если она имеет тип 'submit'. Итак, я сделал тип для 'button'. Есть немало модификаций, которые я делаю, чтобы заставить код работать, но теперь все работает нормально.

Javascript

<script type='text/javascript'>
$(".submit-btn").click(function(){
  var test_name = JSON.stringify($("#test_name").val());
  var test_type = JSON.stringify($("#test_type").val());
  var test_date = JSON.stringify($("#test_date").val());
  var button_pressed = JSON.stringify($(this).attr('name'));
  $.ajax({
    url: "{% url 'add_test' %}",
    type: 'POST',
    data: {'button_pressed' : button_pressed, 'test_name' : test_name, 'test_type' : test_type,
    'test_date' : test_date,'csrfmiddlewaretoken': $("[name=csrfmiddlewaretoken]").val()},
  })
  var button_pr = $(this).attr('name');
  if (button_pr == 'add_new'){
    $("#test_name").val("");
    $("#test_type").val("");
    $("#test_date").val("");
  } else {
    $(".cancel-btn").click();
  }
});
</script>

views.py

def add_test(request):
    if request.method == 'POST':
        test_name = json.loads(request.POST.get('test_name'))
        test_type = json.loads(request.POST.get('test_type'))
        test_date = json.loads(request.POST.get('test_date'))
        test_date = datetime.strptime(test_date, '%Y-%m-%d').date()
        test_obj = Test(test_name = test_name, test_type = test_type, test_date = test_date)
        test_obj.save()
        return HttpResponseRedirect('/test-management/test/')

test_list.html

<form class="form" method="POST" action="{% url 'add_test' %}">
                        {% csrf_token %}
                        <h2>Add Test</h2>
                        <div class="card-body">
                            <div class="form-group bmd-form-group">
                                <div class="input-group">
                                    <p>Name :</p>
                                    <input type="text" class="form-control" id="test_name" name="test_name" placeholder="Test Name...">
                                </div>
                            </div>
                            <div class="form-group bmd-form-group">
                              <div class="input-group">
                                  <p>Type :</p>
                                  <input type="text" class="form-control" id="test_type" name="test_type" placeholder="Test Type...">
                              </div>
                            </div>
                            <div class="form-group bmd-form-group">
                                <div class="input-group">
                                    <p>Date :</p>
                                    <input type="date" class="form-control" id="test_date" name="test_date" placeholder="Test Date...">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-right">
                            <button type="button" class="btn btn-primary btn-link btn-wd btn-lg cancel-btn" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary btn-link btn-wd btn-lg submit-btn" name="add_new">Add & New</button>
                            <button type="button" class="btn btn-primary submit-btn" name="add">Add</button>
                        </div>
                    </form>

По сути, я пишу код java-скрипта, чтобы получить значения полей формы, отправляю их на 'add_test' как Ajax. Чтобы получить название кнопки, которую я нажал, я не могу использовать кнопку типа 'submit'. Спасибо

Answer 3

Я полагаю, ваша форма отправлена ​​с вашей кнопкой отправки. Он отправляет ваши form данные, а не данные AJAX.

Просто отправьте ajax с другой кнопкой или добавьте preventDefault()

<script type='text/javascript'>
$(".submit-btn").click(function(e){
  e.preventDefault();
  var button_pressed = JSON.stringify($(this).attr('name'));
  $.ajax({
    url: "{% url 'add_test' %}",
    type: 'POST',
    data: {'button_pressed' : button_pressed, 'csrfmiddlewaretoken': $("[name=csrfmiddlewaretoken]").val()},
  })
});
</script>

Кроме того, вы должны изменить свое представление, если хотите получать данные формы