Ajax表格提交并获取查询字符串，并附加到新页面并重定向

Question

我正在寻找一种使用Ajax提交表单，重定向到URL并在其上发送数据的方法，还可以在URL上获取查询字符串。基本上，一个正常的获取请求，这是我尝试的

$('#searchform').submit(function(event) {
  $.ajax({
    type: "get",
    url: "/list",
    data: $("#searchform").serialize(),
    beforeSend: function() {
      $(".loader").show();
    },
    success: function(data) {
      location.href = "/list"; //redirect to list
      $("#ajaxcontent").empty(); //try to append data on this div, not sure how 
      $("#ajaxcontent").append(data);
    }
  });
  event.preventDefault();
});

我想获得查询字符串这样

/list?input1=thisinput&input2=anotherinput

与从Get请求收到的相同的东西。

总的来说，我在此上使用Ajax的唯一目的是显示预加载器。

有人会足够友善和耐心，以帮助我解释我应该如何提出我的Ajax请求。我希望我让自己可以理解。

这是表格

<form method="GET" action="list" id="searchform" name="searchform">
    <input type="text" name="search1">
    <input type="text" name="search2">
    <input type="text" name="search3">
<button type="submit" id="submitz">Submit</button>
  </form>

Answer 1

这里的问题是您使用了两种与 list的通信方式。

首先，您要在 list（带有.ajax（）函数），此请求联系人 list，给您您的表单数据并将一些数据发送回（成功函数）。

接下来，您使用一个简单的JavaScript重定向到列表，没有任何数据。

因此，您必须做出选择：

- 保留ajax请求（只需删除location.href ="/list";然后），但是您将停留在同一页面上（您正在附加数据，恰好btw）。它需要从 list，使用和滥用console.log（数据）返回的内容；看看你到达这里的东西。

- 对Ajax请求进行简单的重定向，但是加载程序几乎是看不见的，因为页面更改将非常快。因此，如果没有任何JS，您会更好。测试它：

$('#searchform').submit(function(event) {
  $(".loader").show();
  location.href = "/list?"+$("#searchform").serialize(); //redirect to list
  event.preventDefault();
});