Fatal编程技术网
  • http/
  • Http ionic 2带数据参数的应用浏览器POST表单

Http ionic 2带数据参数的应用浏览器POST表单

http ionic2

Http ionic 2带数据参数的应用浏览器POST表单,http,xmlhttprequest,http-post,ionic2,inappbrowser,Http,Xmlhttprequest,Http Post,Ionic2,Inappbrowser,我想将一个POST表单提交到一个外部url，该url应该使用应用程序内浏览器打开一个包含POST数据参数的新窗口，那么我如何在ionic2中做到这一点呢？您可以使用ionic 2中的InAppBrowser这样做 安装Inappbrowser cordova插件 cordova插件在应用浏览器中添加cordova插件 导入Inappbrowser组件 从“离子本机”导入{InAppBrowser} 创建一个javascript脚本字符串，我们将使用它在inappbrowser中执行，我们将动态创

我想将一个
POST
表单提交到一个外部url，该url应该使用应用程序内浏览器打开一个包含POST数据参数的新窗口，那么我如何在
ionic2
中做到这一点呢？

您可以使用ionic 2中的InAppBrowser这样做

  • 安装Inappbrowser cordova插件

    cordova插件在应用浏览器中添加cordova插件

  • 导入Inappbrowser组件

    从“离子本机”导入{InAppBrowser}

  • 创建一个javascript脚本字符串，我们将使用它在inappbrowser中执行，我们将动态创建一个表单，并将数据发布到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>
    我已经这样做了，我用这种方法将带有付款详细信息的隐藏表单发布到付款url。它运转平稳。 我还可以在loadstart和loadstop事件中检查inappbrowser url的更改。我可以在成功或失败url上关闭inappbrowser

    希望这对你有帮助：）

    嗯。。不工作。加载此页面时应用程序崩溃。@Tanveerahmadar从支付网关重定向时如何获取参数？支付网关向重定向URL发出POST请求。inAppBrowser是否能够从POST方法读取参数？@AshikBasheer您不必在inAppBrowser中读取参数，我们只是通过inAppBrowser将表单发布到支付服务器，作为响应，我们将获得一个新页面，即支付页面。 
       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();" ;

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