我如何处理表单提交而不重定向对美国可见

Question

在我的工作页面http://127.0.0.1:8000/jobs/我有两种形式的作品。一个用来创造工作，一个用来编辑。一个添加新的工作只是很好，但我有问题管理的第二个表格编辑。你知道吗

我对增加工作的看法是：

def jobs(request):
    form = LimitedJobForm(request.POST or None, prefix='add')
    if form.is_valid():
      instance = form.save(commit=False)
      instance.save()

    context ={
    "form":form,
    }
    return render(request,"jobs.html",context)

我对编辑作业的看法是：

def editjob(request):
  # if request.is_ajax():
  jobnum = request.GET.get('jobnum')
  job_list = Job.objects.filter(jobnum=jobnum)
  json_data = serializers.serialize('json', job_list)
  a = json.loads(json_data)
  a = a[0]['pk'] #that's our pk!
# return JsonResponse(a,safe=False)

  j = Job.objects.get(pk=a) 
  editJobForm = JobForm(request.POST or None, prefix='edit',instance=j)
  if editJobForm.is_valid():
        frm_jobnum = editJobForm.cleaned_data.get("jobnum")
        frm_pm = editJobForm.cleaned_data.get("pm")
    #other fields redacted
        instance = editJobForm.save()
        instance.save()
  context ={
      "editJobForm":editJobForm,
    }
  return render(request, "editjob.html", context)

我有一个按钮，其值根据表中的作业选择进行更新：

<button id='editjob' class='btn-primary'>Edit <span id='jobNum2'></span></button>

这个jquery将button值传递给edit视图以获取作业的pk，然后该作业填充一个表单并将其添加到我的http://127.0.0.1:8000/jobs/页面上的div中。你知道吗

//populate edit job form
$('#editjob').click(function(){
    var a = document.getElementById('jobNum').textContent
    $.ajax({
    url: "editjob",
    data: {'jobnum':a},
    success: function(data) {
        // console.log(data);
        $(".mydiv").html(data);
        document.getElementById('editform').action='editjob/?jobnum='+a;    
    },
    });
});

正如您所看到的，一旦用户提交了正在编辑的作业的更新，此时它们将被重定向到http://127.0.0.1:8000/jobs/editjob/?jobnum=[some jobnum]，如果没有验证错误，更新将被保存到数据库中。如果有验证错误，它们当然会显示在这个页面上。我不想让用户重定向到/jobs/editjob页面，但我不知道如何最好地做到这一点。我不得不修改编辑作业表单的操作以重定向，否则django无法理解页面上的两个表单中的哪一个正在提交，因为它认为add job表单正在提交并触发其验证错误。你知道吗

Answer 1

使用error回调

error

Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )

A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." As of jQuery 1.5, the error setting can accept an array of functions. Each function will be called in turn. Note: This handler is not called for cross-domain script and cross-domain JSONP requests. This is an Ajax Event.

因此，您可以使用一些包含错误信息的json进行回复，并在error回调函数中显示这些信息

//populate edit job form
$('#editjob').click(function(){
    var a = document.getElementById('jobNum').textContent
    $.ajax({
    url: "editjob",
    data: {'jobnum':a},
    success: function(data) {
        // console.log(data);
        $(".mydiv").html(data);
        document.getElementById('editform').action='editjob/?jobnum='+a;    
    },
    error: function(jqXHR,textStatus, errorThrown){
         ........................................
         some actions that would be done on error
         ........................................
    }, 
    });
});