将在方法中声明的JSON对象数据发送到另一页

Question

我正在尝试在我的网络上实施付款集成；现在，在使用示例代码之后，我能够开发出第一阶段，即付款收集和处理。

现在，我的问题是当重定向到该页面时，如何在另一页面上显示付款明细

<div class="row">
    <div class="col-75">
    <div class="container">
    <form method="POST" id="payment-form">
    <div class="row">
    <div class="col-50-left">
    <h3>Billing Information</h3>
    <label for="fname"><i class="fa fa-user"></i> First Name</label>
    <input type="text" id="firstname" name="firstname" placeholder="First Name" required="">
    <label for="fname"><i class="fa fa-user"></i> Last Name</label>
    <input type="text" id="lastname" name="lastname" placeholder="Last Name">

    <label for="adr"><i class="fa fa-money"></i> Amount</label>
    <input type="number" id="amount" name="amount" placeholder="NGN 20000">

    <label for="city"><i class="fa fa-institution"></i> City</label>
    <input type="text" id="city" name="city" placeholder="Benin City">
    </div>

    <div class="col-50">
    <div class="icon-container">
    <img src="assets/images/remita-payment-options.png" style="width: 100%;">
    </div>
    <label for="email"><i class="fa fa-envelope"></i> Email</label>
    <input type="email" id="email" name="email" placeholder="[email protected]">

            <label for="adr"><i class="fa fa-phone"></i> Phone</label>
            <input type="text" id="phone" name="phone" placeholder="+234 XXX XXX XXXX">

            <label for="city"><i class="fa fa-comment"></i> Narration</label>
            <input type="text" id="narration" name="narration" placeholder="Donation">
          </div>
        </div>
        <button type="button" class="btn" onclick="makePayment();"> Pay </button>
      </form>
    </div></div></div>

     <script>

                    var date = new Date();
                    var timestamp = date.getTime();
                    var form = document.querySelector("#payment-form");

                    function makePayment() {
                      var paymentEngine = RmPaymentEngine.init({
                         key: 'RzAwMDAyMjg5NTl8NDMwNjUxNDd8ZmM4MDg5Yjc3M2Y5ZTk0YWViMDJkMmRmMDVhYmI2MjAwMWVhYjNjY2I5NmU0ZWU3MzBiNTMwYzNlOGEzYTYyMTc2ODM1NzBkYmI4MmI3MTE1ZmUxMzkxYTg0MzZhYjM0ODlkY2U0NzZiMTE4OWU0YTNjMjA1MGJjY2UyNzNkN2I=',
                          customerId: form.querySelector("#email").value,
                          firstName: form.querySelector("#firstname").value,
                          lastName: form.querySelector("#lastname").value,
                          email: form.querySelector("#email").value,
                          amount: form.querySelector("#amount").value,
                          transactionId: timestamp,
                          narration: form.querySelector("#narration").value,
                          phone: form.querySelector("#phone").value,
                          city: form.querySelector("#city").value,
                          onSuccess: function (response) {
                          console.log('callback Successful Response', response);
                          console.log('Amount', response.amount);
                          console.log('TransactionId: ', response.transactionId);
                          console.log('RRR: ', response.paymentReference);

                          /*How do i display these data on the save_live.html page
                          RRR:
                          TransactionId:
                          Amount:
                           when it redirects there*/
                        window.localStorage.setItem("globaly", JSON.stringify(response));
                        window.location.href = 'save_live.html';


                          },
                          onError: function (response) {
                          console.log('callback Error Response', response);
                          },
                          onClose: function () {

                          form.reset();
                          console.log("closed");

                          }
                          });
                          paymentEngine.showPaymentWidget();
                        }
                    </script>
                    <script type="text/javascript" src="https://remitademo.net/payment/v1/remita-pay-inline.bundle.js"></script>

这是下面的save_live.html页面脚本以及我尝试做的事情

    <div class="row">
    <div class="col-75">
    <div class="container" id="paid">

    </div></div></div>

    <script>
     $(document).ready(function(){
    $.getJSON("index.html", function(data){
      var payment_data = '';
      $.each(data, function(key, value){

        payment_data += '<div>';
        payment_data += '<p>'+value.paymentReference+'</p>';
        payment_data += '<p>'+value.amount+'</p>';
        payment_data += '<p>'+value.transactionId+'</p>';
        payment_data += '</div>';
      })
      $('#paid').append(payment_data);
    });
    });
</script>

Answer 1

您如何运行以上页面？让我们使用本地主机服务器，使用localStorage.setItem保存，然后使用localStorage.getItem将其保存在同一域中。