Django:从Ajax发送到Python的数据被清空了

Question

我正在尝试获取从Ajax发送到Python的字符串数据。但是，当我记录代码时，数据不会被发送。它是空的。你能告诉我为什么吗？

附注：代码的目的是获取提交按钮的名称，以便在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

我想你的表格上有你的提交按钮。它发送的是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>

此外，如果要接收表单数据，则必须更改视图。

Answer 3

我发现如果提交按钮的类型是'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脚本代码来获取表单字段的值，并将它们作为Ajax发送到'add_test'。要获取我单击的按钮的名称，我不能使用'submit'类型的按钮。谢谢