如何通过Ajax与Spring实现在当前页面重定向新URL？附代码示例

Alright, let's work through this problem. The key thing to understand here is that Ajax requests don't automatically trigger browser page redirects—they just fetch the response data from the server, so your Spring Controller returning a view path won't make the browser jump to a new page on its own. Let's go over a couple of solid solutions to get this working:

Solution 1: Manually Trigger Redirect in Ajax Success Callback #

If you need to run some logic via Ajax first (like validating parameters) before redirecting, you can use window.location.href in the Ajax success handler to jump to your target page. First, let's fix up your original Ajax code (there were a couple of syntax issues):

$.ajax({
  type: 'GET',
  url: "/report-join-promo/list",
  data: { a: a, b: b }, // Fixed: data needs key-value pairs; {a,b} is only valid in ES6 with matching variable names
  success: function() {
    // Directly redirect to your target page's URL, including parameters
    window.location.href = `/report-join-promo/report?a=${a}&b=${b}`;
  },
  error: function() {
    alert("Oops, something went wrong with the request!");
  }
});

If you want the backend to tell the frontend where to redirect, you can modify your Controller to return the target URL instead of a view (add @ResponseBody):

@RequestMapping(value = "/list", method = RequestMethod.GET )
@ResponseBody
public String reportJoinPromoList(@RequestParam(value = "a", required = false, defaultValue = "") String a, 
                                  @RequestParam(value = "b", required = false, defaultValue = "") String b) {
    // Add your business logic here
    return "/report-join-promo/report?a=" + a + "&b=" + b;
}

Then update the Ajax success callback to use the returned URL:

success: function(targetUrl) {
  window.location.href = targetUrl;
}

Solution 2: Return a Redirect from the Controller #

You can have your Spring Controller send a 302 redirect response, then configure your Ajax to detect this and trigger the page jump. Here's how to adjust the Controller:

@RequestMapping(value = "/list", method = RequestMethod.GET )
public String reportJoinPromoList(@RequestParam(value = "a", required = false, defaultValue = "") String a, 
                                  @RequestParam(value = "b", required = false, defaultValue = "") String b) {
    // Add your business logic here
    // Redirect to the target page with parameters
    return "redirect:/report-join-promo/report?a=" + a + "&b=" + b;
}

Then adjust your Ajax to listen for the redirect header:

$.ajax({
  type: 'GET',
  url: "/report-join-promo/list",
  data: { a: a, b: b },
  xhrFields: { withCredentials: true }, // Needed if dealing with cookies or authentication
  success: function(response, status, xhr) {
    const redirectUrl = xhr.getResponseHeader("Location");
    if (redirectUrl) {
      window.location.href = redirectUrl;
      return;
    }
    // Handle non-redirect cases if needed
  },
  error: function(xhr) {
    // In case the redirect is caught as an error (rare, but just in case)
    if (xhr.status === 302) {
      const redirectUrl = xhr.getResponseHeader("Location");
      window.location.href = redirectUrl;
    }
  }
});

Solution 3: Skip Ajax Entirely (Simplest Option) #

If you don't need to run any asynchronous logic before redirecting, you don't even need Ajax! Just use window.location.href to jump directly to the Controller's URL. The browser will handle the GET request and load the new page automatically:

window.location.href = `/report-join-promo/list?a=${a}&b=${b}`;

Your existing Controller code works perfectly with this approach—no changes needed.

Pick the solution that fits your use case best. If you just need to pass parameters and redirect, Solution 3 is the most straightforward.

内容的提问来源于stack exchange，提问作者Anggara Maha Putra