来自Angular的非XHR(非AJAX)发布请求

时间:2018-08-23 12:00:24

标签: angular angular6

在Angular应用程序中使用外部服务是一项要求。外部服务具有自己的用户界面。因此,我们必须使用给定外部服务URL上的纯HTTP Post请求重定向到外部服务。

是否可以通过Angular进行非AJAX后期调用,以使屏幕重定向到外部服务网页。

1 个答案:

答案 0 :(得分:4)

解决方案是动态创建表单并提交。我在Service类中创建了一个如下所示的方法来使其工作。然后从组件调用此方法。创建了一个辅助方法createHiddenElement,其中还有许多要发布的参数。希望这对某人有帮助。

  postToExternalSite(dataToPost: SomeDataClass): void {
    const form = window.document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "https://someexternalUrl/xyz");
    //use _self to redirect in same tab, _blank to open in new tab
    form.setAttribute("target", "_blank"); 

    //Add all the data to be posted as Hidden elements
    form.appendChild(this.createHiddenElement('firstname', dataToPost.firstName));
    form.appendChild(this.createHiddenElement('lastname', dataToPost.lastname));

    window.document.body.appendChild(form);
    form.submit();
  }

  private createHiddenElement(name: string, value: string): HTMLInputElement {
    const hiddenField = document.createElement('input');
    hiddenField.setAttribute('name', name);
    hiddenField.setAttribute('value', value);
    hiddenField.setAttribute('type', 'hidden');
    return hiddenField;
  }