描述

比如支付寶的支付介面呼叫的動態生成的跳轉頁面，後臺需要返回給前端列印跳轉支付

<form name="punchout_form" method="post" action="https://openapi.alipaydev.com/gateway.do?charset=utf-8&method=alipay.trade.page.pay&sign=YKCABH9dIsx0IV3QxtP5Eewm0LMe2HlNJyWotChGswakupJyuTmirTf4MH%2FtFmNOUs73swjJZUrVNhtBDFGeaxdUbAl9FT6iIvHV512NTmRQCiBrC1I9fNQ8v1YV11NNZKkIJtU7QWvi03CVKi%2B927Kzlc1gpleX9abzj51OL1JjXL7kcaM2GnIDZ6b3P3C2aOROewbDP2WuJUI7LOKh3u0MWF6um%2BKydKTrcdFl57S0fpVyREaxZYWmNRKo7TZEOxMEeNoF7Hf2%2Fr2dm7Sav%2Fq7YcdsG%2BNEKufJ1H4pZsAv2y7M1R4krN3egMm%2FFiPRG9SE3yXivpr2Ljv7sFMSzg%3D%3D&return_url=http%3A%2F%2F127.0.0.1%3A8080%2Falipay.trade.page.pay-JAVA-UTF-8%2Freturn_url.jsp&notify_url=http%3A%2F%2F170d491b26.iok.la%2Falipay.trade.page.pay-JAVA-UTF-8%2FPayServlet&version=1.0&app_id=2016091900549628&sign_type=RSA2&timestamp=2018-11-27+16%3A02%3A16&alipay_sdk=alipay-sdk-java-dynamicVersionNo&format=json"
 
>
<input type="hidden" name="biz_content" value="{&quot;out_trade_no&quot;:&quot;2018112716213512&quot;,&quot;total_amount&quot;:&quot;0.01&quot;,&quot;subject&quot;:&quot;測試&quot;,&quot;body&quot;:&quot;第三方&quot;,&quot;product_code&quot;
 
:&quot;FAST_INSTANT_TRADE_PAY&quot;}">
<input type="submit" value="立即支付" style="display:none" >
</form>
<script>document.forms[0].submit();</script>

這段程式碼是動態生成的，一旦列印成HTML載入馬上submit提交跳轉。
而這也是後臺生成的，需要返回前端列印。而且不使用jsp，沒有out.println(result)的快捷。

方法

後臺

/**
 * 網頁跳轉支付
 *
 * @param transaction
 */
 

@RequestMapping(value = "/payTrade", method = RequestMethod.POST, produces = "text/html; charset=UTF-8")
@ResponseBody  //必須寫
public String pagePay(Transaction transaction, HttpServletResponse response) throws AlipayApiException, IOException {
    String result = alipayService.alipayTradePagePay(transaction);
//  log.info(result);
    return result;
}

result是儲存了剛剛的動態HTML程式碼的String變數。
能返回HTML的關鍵是

1. @RequestMapper的produces = “text/html; charset=UTF-8”
2. @ResponseBody

前端

   $.post({
        url: "xxx",
        data:xxx,
        dataType: "html",
        success: function (data) {
            console.log("成功data: " + data);
            /*
             建立新視窗物件
            var w = window.open('about:blank');
             非同步寫入資源
            w.document.write(data);
            w.document.close();
            w.print();
            */
     
            // 千古一句
            document.write(data);
        },
        error: function () {
            alert("異常-錯誤");
        }
    });

獲取到的資料格式宣告為 dataType: “html”
列印這個獲取到的HTML程式碼資料的方法有兩個

1. 以新建彈窗的形式非同步寫入（但是一般會被瀏覽器攔截）
   var w = window.open(‘about:blank’);
   w.document.write(data);
   w.document.close();
   w.print();
2. 直接 document.write(data) , 在本頁面跳轉