时间戳

首页 > 解决方案 > 如何使用来自 Angular 中的组件的发布请求打开一个新选项卡

javascript - 如何使用来自 Angular 中的组件的发布请求打开一个新选项卡

问题描述

我正在尝试构建一个将请求帖子发送到网址的函数，同时在带有帖子请求的新选项卡中打开该网址......

这是我到目前为止得到的...

老的

pay() {
    var data = `{
      "description": "Test PAYU",
      "referenceCode": "TestPayU",
      "amount": "20000",
      "tax": "3193",
      "buyerEmail": "test@test.com",
      "responseUrl": "http://www.test.com/response",
      "confirmationUrl": "http://www.test.com/confirmation",
      "submit": ""
    }`;
    this.http.post('https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu/', data).subscribe( (response)=>{
      console.log(response);
     });
  }

我想在请求帖子中的新选项卡中打开该网址..

我不知道如何用 Angular 做到这一点......

更新

所以，我已经为这个问题做了这个解决方案，用javascript添加这个动态表单来做到这一点：

pay() {
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu");
    form.setAttribute("target", "view");
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("merchantId", "508029");
    hiddenField.setAttribute("accountId", "512321");
    hiddenField.setAttribute("description", "Test PAYU");
    hiddenField.setAttribute("referenceCode", "TestPayU");
    hiddenField.setAttribute("amount", "20000");
    hiddenField.setAttribute("tax", "3193");
    hiddenField.setAttribute("taxReturnBase", "16806");
    hiddenField.setAttribute("currency", "COP");
    hiddenField.setAttribute("signature", "7ee7cf808ce6a39b17481c54f2c57acc");
    hiddenField.setAttribute("test", "1");
    hiddenField.setAttribute("buyerEmail", "test@test.com");
    hiddenField.setAttribute("responseUrl", "http://www.test.com/response");
    hiddenField.setAttribute("confirmationUrl", "http://www.test.com/confirmation");
    hiddenField.setAttribute("submit", "");
    form.appendChild(hiddenField);
    document.body.appendChild(form);
    window.open('', 'view');
    form.submit();
}

问题是，即使在新选项卡中打开页面，参数也不会发送到页面......

可能是什么问题呢？

标签： javascriptangulartypescriptfunctionrequest

解决方案

我使用这种带有 JavaScript 的动态表单解决了我的问题：

pay() {
    var form = document.createElement("form");
    form.target = "view";
    form.method = "POST";
    form.action = "https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu";
    var params = {
      "merchantId": "508029",
      "accountId": "512321",
      "description": "Test PAYU"
    };

    for (var i in params) {
        if (params.hasOwnProperty(i)) {
          var input = document.createElement('input');
          input.type = 'hidden';
          input.name = i;
          input.value = params[i];
          form.appendChild(input);
        }
    }

    document.body.appendChild(form);
    form.submit();
    window.open('', 'view');
    }

这做了我想要的，问题解决了！

推荐阅读