如何处理表单提交而不对用户可见重定向

Posted 2023-05-09

【中文标题】如何处理表单提交而不对用户可见重定向

【英文标题】：How can I handle form submission without redirection visible to the user

【发布时间】：2016-03-26 07:30:13

【问题描述】：

在我的工作页面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 将按钮值传递给编辑视图以获取作业的 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 无法理解页面上的两个表单中的哪一个被提交，因为它认为添加作业表单正在被提交并触发它的验证错误。

【问题讨论】：

如果不想刷新页面，就不能使用表单提交。您只能提取表单中的内容并通过 ajax 提交数据，因此其action 的表单没有那么有用。只是出于好奇，您为什么将添加作业和编辑作业放在同一页面中？这可能会让用户感到困惑。

刷新页面没问题。但它并没有这样做，它重定向到另一个页面，该页面也显示用户刚刚提交的相同表单。另外，我认为我的页面设计得很好，可以避免混淆。如果有任何混乱，我在大厅对面的房间工作

别忘了用encodeURIComponent(a)转义a。

【参考方案1】：

使用error回调

错误

类型：函数（jqXHR jqXHR，字符串 textStatus，字符串 错误抛出）

请求失败时调用的函数。这 函数接收三个参数： jqXHR（在 jQuery 1.4.x 中， XMLHttpRequest) 对象，一个描述错误类型的字符串 发生和一个可选的异常对象，如果发生了。可能的 第二个参数的值（除了 null）是“超时”，“错误”， “中止”和“解析器错误”。发生 HTTP 错误时，errorThrown 接收 HTTP 状态的文本部分，例如“未找到” 或“内部服务器错误”。从 jQuery 1.5 开始，错误设置可以 接受一个函数数组。每个函数都会被依次调用。 注意：跨域脚本不调用此处理程序，并且 跨域 JSONP 请求。这是一个 Ajax 事件。

因此，您可以回复一些包含错误信息的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
         ........................................
    , 
    );
);

【讨论】：

我不明白这如何适用于我的情况。