离子2 inappbrowser POST形式与数据参数

Question

离子2 inappbrowser POST形式与数据参数

mah*_*ail 2 http xmlhttprequest http-post inappbrowser ionic2

我想将一个POST表单提交到外部 URL,这应该使用应用程序浏览器打开一个带有post data params的新窗口,那么我该怎么做ionic2呢？

Answer 1

tan*_*dar 8

你可以在离子2中使用InAppBrowser这样做;

安装Inappbrowser cordova插件

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

从'ionic-native'导入{InAppBrowser};
创建一个我们将在inappbrowser中执行的javascript脚本字符串,我们将动态创建动态表单并将数据发布到url.因为我们需要创建一个像redirect.html这样的html页面并将其放在www文件夹中,我们将在应用程序浏览器中打开此文件并将表单从此html文件发布到外部URL

创建一个html文件并将其放在app redirect.html的www文件夹中

<!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>

Run Code Online (Sandbox Code Playgroud)

在组件中这样做

   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();" ;

Run Code Online (Sandbox Code Playgroud)

打开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);
  });
}

Run Code Online (Sandbox Code Playgroud)

我已经这样做了我使用此方法将隐藏的表格与付款详细信息发布到付款网址.它的工作顺利.我还可以检查loadstart和loadstop事件中的inappbrowser url更改我可以在成功或失败URL上clse inappbrowser

希望这可以帮助你.. :)

归档时间：	9 年，1 月前
查看次数：	3449 次
最近记录：	5 年，11 月前