Question

我是ajax的新手，我想通过ajax请求从列表中删除学生，我想在特定div中的同一页面上打印请求的响应。但响应重定向到新页面。

这是我的views.py

def delete_student(request):

    response = {"status": False, "errors": []}
    student_id = request.GET.get('student_id', '')

    if request.method == "POST":
        form = DeleteStudentForm(request.POST)

        if form.is_valid():
            student = Student.objects.get(
                user__username = form.cleaned_data["username"]
            )
            student.delete()

            response["status"] = True
        else:
            for key, value in form.errors.items():
                tmp = {'key': key, 'error': value.as_text()}
                response['errors'].append(tmp)

    return HttpResponse(json.dumps(response))

这是我的ajax请求

function delete_student(student_id){
        $.ajax({
            url: Window.base.urls.delete_student+"?student_id="+student_id,
            type: $this.attr('method'),
            data: $this.serialize(),
            success: function(response){
                response = JSON.parse(response);
                if(response.status){
                    console.log(student_id)
                    $('#id_response').append(JSON.stringify(response))
                    $('#id_student_'+student_id).remove();
                    $('#delete_more_student').removeClass('disabled');
                    $('#delete_more_student').attr('onclick', 'open_delete()');
                }else{
                    $('#id_response').append(JSON.stringify(response));

                }
            }
        });
        return false;
    }

这是我的表格

<form class="form-horizontal" id="id_delete_student" action="{% url 'delete_student' %}" role="form" method="post" onsubmit="return delete_student('{{ student.id }}')" style="display: none;">
    {% csrf_token %}
    <div class="row">
        <div class="col-md-12">
            <div class="form-group"  id="id_username_error_parent_div">
                <div class="col-md-12">
                    <label for="id_username" class="control-label">*Username:</label>
                    {{ delete_student_form.username }}
                    <small class="error-msgs error" id="id_username_error" style="display: none;"></small>
                 </div>
             </div>
         </div>
    </div>

Answer 1

只需为表单的onSubmit事件创建单独的方法并取消表单提交，因为您的表单将由ajax调用实际提交。这是代码片段

var ajaxFormSubmit = function (e) {
        e.preventDefault();
  
  //your rest of code for ajax form submission
}

$('id_delete_student').on('submit', ajaxFormSubmit);

页面在ajax请求后重定向

1 个答案: