如何将Spring Boot支付处理结果返回至Angular应用？

我来帮你解决这个问题——你现在的核心困境是Angular发起请求后，浏览器跳转到了JSP页面，脱离了Angular的SPA上下文，所以/dopayment返回的结果没法自动回到Angular应用。下面给你两种可行的方案，按需选择：

方案一：重构为纯SPA流程（推荐） #

既然用了Angular作为前端框架，更推荐全程在Angular中处理表单渲染和结果接收，避免页面跳转，这样流程更流畅也符合SPA的设计理念：

步骤1：修改Spring的/payment/add接口，返回数据而非JSP页面 #

把原来返回JSP的接口改成返回JSON数据，让Angular拿到订单信息后自己渲染表单：

@RequestMapping(value = "/payment/add", method = RequestMethod.POST, produces = "application/json")
public @ResponseBody Map<String, Object> getPaymentInfo(@RequestBody Orders order) { 
  logger.info("inside submit..."); 
  Map<String, Object> data = new HashMap<>();
  data.put("orderId", order.getOrderId()); 
  data.put("bankAccNo", order.getBankAccNo()); 
  data.put("amount", order.getAmount()); 
  return data; 
}

注意：这里用@RequestBody接收Angular传来的Orders对象，需要确保Spring已经配置了JSON解析器（比如Jackson）。

步骤2：在Angular中渲染支付表单 #

创建一个Angular组件（比如PaymentFormComponent），拿到接口返回的数据后渲染表单：

// 组件类示例
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

paymentData: any;

constructor(private http: HttpClient, private router: Router) {}

addOrder(order: Orders) { 
  this.http.post(`${environment.apiUrl}/payment/add`, order).subscribe(data => {
    this.paymentData = data;
    // 跳转到支付表单组件
    this.router.navigate(['/payment-form']);
  });
}

<!-- 支付表单模板 -->
<form (ngSubmit)="doPayment()">
  <table align="center">
    <tr>
      <td>Order Id:</td>
      <td>{{paymentData.orderId}}</td>
    </tr>
    <tr>
      <td>Account No:</td>
      <td>{{paymentData.bankAccNo}}</td>
    </tr>
    <tr>
      <td>Amount:</td>
      <td>{{paymentData.amount}}</td>
    </tr>
    <tr>
      <td><button type="submit">Submit</button></td>
    </tr>
  </table>
</form>

步骤3：Angular调用/dopayment接口接收结果 #

在组件中添加支付提交方法，直接调用Spring接口并接收结果：

doPayment() {
  const params = new HttpParams()
    .set('orderId', this.paymentData.orderId)
    .set('bankAccNo', this.paymentData.bankAccNo)
    .set('amount', this.paymentData.amount.toString());

  this.http.post(`${environment.apiUrl}/dopayment`, null, { params })
    .subscribe(result => {
      // 处理支付结果，比如显示弹窗、跳转到结果页面
      console.log('支付结果:', result);
      this.router.navigate(['/payment-result'], { queryParams: { result: result } });
    });
}

方案二：保留JSP跳转，通过重定向传递结果 #

如果因为业务限制必须使用JSP页面，可以在/dopayment接口处理完成后，重定向回Angular应用，并通过查询参数或本地存储传递结果：

步骤1：修改/dopayment接口，重定向到Angular #

把原来返回字符串的接口改成重定向，将结果作为查询参数传递：

@RequestMapping(value = "/dopayment", method = RequestMethod.POST)
public String doPayment(@RequestParam("orderId") String orderId,
                        @RequestParam("bankAccNo") String bankAccNo,
                        @RequestParam("amount") Double amount,
                        ModelMap model) { 
  String result = // 执行支付处理并返回结果
  // 假设Angular应用的基础URL是http://localhost:4200，结果页面路由是/payment-result
  return "redirect:http://localhost:4200/payment-result?result=" + result; 
}

步骤2：在Angular中接收查询参数 #

创建PaymentResultComponent，接收并处理传递过来的结果：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    const paymentResult = params['result'];
    // 处理结果，比如显示给用户
    console.log('支付结果:', paymentResult);
  });
}

可选：用LocalStorage传递敏感结果 #

如果结果包含敏感信息，不适合放在查询参数中，可以在JSP提交成功后先把结果存入LocalStorage，再重定向到Angular：

// 修改/dopayment接口返回一个中转JSP页面
@RequestMapping(value = "/dopayment", method = RequestMethod.POST)
public String doPayment(@RequestParam("orderId") String orderId,
                        @RequestParam("bankAccNo") String bankAccNo,
                        @RequestParam("amount") Double amount,
                        ModelMap model) { 
  String result = // 执行支付处理并返回结果
  model.put("paymentResult", result);
  return "redirect-to-angular"; 
}

然后创建redirect-to-angular.jsp页面，用JavaScript存入LocalStorage后跳转：

<!DOCTYPE html>
<html>
<head>
    <script>
        // 存入LocalStorage
        localStorage.setItem('paymentResult', '${paymentResult}');
        // 跳转到Angular应用
        window.location.href = 'http://localhost:4200/payment-result';
    </script>
</head>
<body></body>
</html>

最后在Angular组件中读取LocalStorage：

ngOnInit() {
  const paymentResult = localStorage.getItem('paymentResult');
  if (paymentResult) {
    // 处理结果
    console.log('支付结果:', paymentResult);
    // 用完后删除，避免残留
    localStorage.removeItem('paymentResult');
  }
}

内容的提问来源于stack exchange，提问作者sam