时间戳

首页 > 解决方案 > 如何在前端 javascript 上接收通过 post 请求提交的表单数据

javascript - 如何在前端 javascript 上接收通过 post 请求提交的表单数据

问题描述

我打算将支付网关服务集成到我的项目中。根据此支付网关服务提供的文档，我需要向其页面提交一些值。

下面的代码是我如何向它提交表单数据的方式。

<form method="POST" [formGroup]="formService.ngForm" (ngSubmit)="onSubmit($event)" name="ePayment"
        action="https://www.mobile88.com/ePayment/entry.asp">
    <input type="hidden" name="MerchantCode" [value]="merchantSetting.merchantCode">
    <input type="hidden" name="SignatureType" [value]="merchantSetting.signatureType" />
    <input type="hidden" name="Signature" [value]="generatedSignature | async" />
    <input type="hidden" name="ResponseURL" [value]="merchantSetting.responseUrl" />
    <input type="hidden" name="BackendURL" [value]="merchantSetting.backendUrl" />

    <ion-label>{{ 'paymentPage.referenceNumber' | translate }}</ion-label>
    <ion-input type="text" name="RefNo" [value]="referenceNumber" readonly="true"></ion-input>

    <ion-label>{{ 'paymentPage.currency' | translate }}</ion-label>
    <ion-input type="text" name="Currency" value="MYR" readonly="true"></ion-input>

    <ion-label>{{ 'paymentPage.productDescription' | translate }}</ion-label>
    <ion-input type="text" name="ProdDesc" readonly="true" [value]="packageSubscriber | async"></ion-input>

    <ion-label>{{ 'paymentPage.amount' | translate }}</ion-label>
    <ion-input type="text" name="Amount" readonly="true" [value]="amount"></ion-input>

    <ion-label>{{ 'paymentPage.username' | translate }}</ion-label>
    <ion-input formControlName="username" type="text" name="UserName">

    <ion-label>{{ 'paymentPage.userEmail' | translate }}</ion-label>
    <ion-input formControlName="userEmail" type="text" name="UserEmail"></ion-input>
    <ion-label>{{ 'paymentPage.userContact' | translate }}</ion-label>
    <ion-input formControlName="userContact" type="text" name="UserContact"></ion-input>
    <ion-button type="submit" class="submit-button" value="Proceed with Payment" name="Submit">
          {{ 'paymentPage.proceedWithPayment' | translate }}
    </ion-button>
</form>


  async onSubmit(e) {
    if (this.formService.ngForm.valid) {
        e.target.submit();
    }
  }

表单提交后，用户将被重定向到支付网关的网页并进行支付。付款完成后，付款网关将被重定向回 responseUrl（这是我们的 Angular 前端），我们在表单提交中提供了一些通过 POST 方法附加的付款信息。在这种情况下，我怎样才能使用 javascript 检索这些值？

我尝试做一些谷歌搜索，结果发现大多数人会直接使用下面的 php 代码来接收 html 中的值，但在我们的项目堆栈中，前端和后端是完全分开的。有没有办法做到这一点？

  $_POST["name"]

  $_POST["email"]

谢谢。

标签： javascriptangulartypescriptionic-framework

解决方案

发布表单用于将数据发送到服务器，发布的表单以新网页响应。这不是 Angular 通常的做法。在 Angular 中，您通常使用模板表单或响应式表单将表单绑定到对象，然后使用 Angular HttpClient 将数据发送回服务器。

您要问的问题基本上是我如何在 Angular 中处理表单，这实际上超出了 StackOverflow 答案的范围。您需要阅读 Angular 表单，一旦您了解了这一点，您就需要了解 Angular 服务如何在页面之间传递数据。

推荐阅读