带有数据参数的 ionic 2 inappbrowser POST 表单答案

【问题标题】：ionic 2 inappbrowser POST form with data params带有数据参数的 ionic 2 inappbrowser POST 表单
【发布时间】：2016-07-13 06:52:51
【问题描述】：

我想向 external url 提交一个POST 表单，它应该使用应用内浏览器打开一个带有发布数据参数的新窗口，所以我如何在ionic2 中执行此操作?

【问题讨论】：

标签： http xmlhttprequest http-post ionic2 inappbrowser

【解决方案1】：

您可以在 ionic 2 中使用 InAppBrowser 来执行此操作；

安装 Inappbrowser cordova 插件

cordova 插件添加cordova-plugin-inappbrowser
导入 Inappbrowser 组件

从“离子原生”导入 {InAppBrowser}；
创建一个我们将在 inappbrowser 中执行的 javascript 脚本字符串，我们将使用它动态创建一个动态表单并将数据发布到 url。因为我们需要创建一个像redirect.html这样的html页面并将其放在www文件夹中，我们将在应用内浏览器中打开这个文件，并从这个html文件向外部url发布一个表单

创建一个 html 文件并将其放在应用程序的 www 文件夹中重定向.html

<!DOCTYPE html>
<html>
<head>
    <title>Redirecting to the payment page</title>
</head>
<body>
    <b>
    please wait we are redirecting to the payment page....
</b>
    <form id="ts-app-payment-form-redirect"></form>
</body>
</html>

在组件中这样做

   let options = {
        name: 'tanveer ahmad dar',
        email: 'tanveerahmaddar@example.com',
        item_id: 1234,
        reference: 1234,
        item_descr: 'description',
        item_quant: 1,
        item_valor: 50 * 100
    };

let formHtml:string = '';
for(let key in Options){
   if (result.hasOwnProperty(key)) {
       let value = result[key];
      formHtml+='<input type="hidden" value="'+value+'" id="'+key+'" name="'+key+'"/>';
   }
}

let url = "some payment gateway url"
let payScript = "var form = document.getElementById('ts-app-payment-form-redirect'); ";
payScript += "form.innerHTML = '" + formHtml + "';";
payScript += "form.action = '" + url + "';";
payScript += "form.method = 'POST';" ;
payScript += "form.submit();" ;

打开inappbrowser并在loadstop事件上使用inappbrowser的executeScript方法执行脚本

if (this.platform.is('cordova')) {
  let browser = new InAppBrowser('redirect.html', '_blank', 'location=no');
   browser.show();
   browser.on("loadstart")
   .subscribe(
      event => {
         console.log("loadstop -->",event);
         if(event.url.indexOf("some error url") > -1){
         browser.close();
         this.navCtrl.setRoot(BookingDetailPage,{
             success:false
          });
        }
      },
      err => {
        console.log("InAppBrowser loadstart Event Error: " + err);
   });
   //on url load stop
    browser.on("loadstop")
   .subscribe(
       event => {
          //here we call executeScript method of inappbrowser and pass object 
          //with attribute code and value script string which will be executed in the inappbrowser
          browser.executeScript({
              code:payScript
           });
       console.log("loadstart -->",event);
       },
   err => {
      console.log("InAppBrowser loadstop Event Error: " + err);
   });
  //on closing the browser
   browser.on("exit")
  .subscribe(
    console.log("exit -->",event);
  },
  err => {
   console.log("InAppBrowser loadstart Event Error: " + err);
  });
}

我已经这样做了，我使用这种方法将带有付款详细信息的隐藏表单发布到付款网址。它的工作顺利。我还可以检查 loadstart 和 loadstop 事件中的 inappbrowser url 更改我可以在成功或失败 url 上关闭 inappbrowser

希望这对你有帮助.. :)

【讨论】：

好吧.. 不工作。加载此页面时应用程序崩溃。
@tanveerahmaddar 从支付网关重定向时如何获取参数？支付网关向重定向 URL 发出 POST 请求。 inAppBrowser 是否能够从 POST 方法中读取参数？
@AshikBasheer 你不用看inappbrowser中的参数，我们只是通过inappbrowser将表单发送到支付服务器，作为响应我们会得到一个新的页面，即支付页面。