gpt4 book ai didi

http - 带有数据参数的 ionic 2 inappbrowser POST 表单

转载 作者:可可西里 更新时间:2023-11-01 16:24:56 25 4
gpt4 key购买 nike

我想提交一个 POST 表单到一个 external url,这应该使用应用内浏览器打开一个带有发布数据参数的新窗口,所以我该怎么做这在 ionic2 中?

最佳答案

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

  1. 安装 Inappbrowser cordova 插件

    cordova插件添加cordova-plugin-inappbrowser

  2. 导入 Inappbrowser 组件

    从“ionic-native”导入 {InAppBrowser};

  3. 创建一个我们将在 inappbrowser 中执行的 javascript 脚本字符串,使用它我们将动态创建一个动态表单并将数据发布到 url。为此,我们需要创建一个 html 页面,如 redirect.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();" ;
  1. 打开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

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

关于http - 带有数据参数的 ionic 2 inappbrowser POST 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38344536/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com