如何在javascript交互的php页面之间正确传递变量

How to pass variable between php pages correctly where javascript is interactive?

本文关键字：之间 变量 javascript 交互 php      更新时间：2023-09-26

我是这个领域的新手，目前在小型电子商务网站上工作。因此，如果有人能给我任何建议或提示，或者将类似的问题与这个问题的答案联系起来，我将不胜感激。

我知道这篇文章很长。。。然而，我想尽可能准确地分享我的处境，让人们正确地理解我正在挣扎的事情。这就是为什么它变成了长帖。。。。。。

我有一个流程和代码，你可以在下面看到。

而且，我现在的处境是，我不知道如何让"编辑"按钮在revieworder.php页面中正确工作，而其他功能则可以正常工作。。。。

所以，我的问题是如何同时实现以下目标？

  1. 当用户按下revieworder.php页面中的"编辑"按钮时，将变量从revieworderphp传递到options.php和deliveryinformation.php页面

  2. 用户从revieworder.php页面跳转到deliveryinformation.php页面后，用于国家/地区选择的javascript仍然正常工作（通过更改国家/地区，javascript返回从DB检索的shippingfee，具体取决于同一页面中所选的国家/地区（deliveryinformations.php）。）

  3. shippingfee、totalfee和country数据在以下流程中正确传递
    revieworder.php→交付信息.php→revieworder.php
    revieworder.php→options.php→交付信息.php→revieworder.php

你能教我如何存档吗？

我的网站流在这里

第一页（options.php）：用户可以选择他们想要订购的产品的详细信息

第二页（deliveryinformation.php）：用户应该输入要交付的信息，如姓名、地址等。此外，通过更改国家/地区，javascript会返回从DB检索到的shippingfee，具体取决于同一页中所选的国家/地区（deliveryformation.php）。

第3页（revieworder.php）：用户可以查看产品的详细信息和交付信息。用户可以按"编辑"按钮返回options.php页面或deliveryinformation.php页面更改他们的输入

代码

options.php

<form name="selection" method="POST" action="deliveryinformation.php">  
  <div class="form-group">
    <select id="dropdownforoption" name="options" class="form-control">
      <option value="" select="selected">Option</option>
      <option value="babysname">Baby's name</option>
    </select>
  </div>
  <div>
    <textarea id="request" name="request" placefolder="please type your request"></textarea>
  </div>
  <div class="form-group">
    <select id="dropdownforsize" name="size" class="form-control">
      <option value="" select="selected">Size</option>
      <option value="27cm x 24cm">27cm x 24cm</option>
      <option value="specialsize">special size</option>
    </select>
  </div>
  <button id="delivery" type="submit" onclick="return onclickvalidation()">Proceed to develivery information</button>
</form>

deliveryinformation.php

<?php
  $options = $_POST['options'];
  $request = $_POST['request'];
  $size = $_POST['size'];
>
<html>
  <head>
    <script type="text/javascript" src="toppage.js"></script>
  </head>
...
<form name="delivery" method="POST" action="revieworder.php">
  <input type="hidden" name="options" value="<?= $options; ?>"/>
  <input type="hidden" name="request" value="<?= $request; ?>"/>
  <input type="hidden" name="size" value="<?= $size; ?>"/>
  <div class="row">
    <div class="col-md-4">
      <p>Name</p>
      <p>Country</p>
    </div>
    <div class="col-md-4">
      <input id="name" name="name" placeholder="please type your name">Name</input>
      <div class="form-group">
        <select id="countryselection" name="country" class="form-control">
          <option value="" select="selected">Choose your country</option>
          <option value="germany" select="selected">Germany</option>
          <option value="other" select="selected">Other</option>
        </select>
      </div>
    </div>
    <div class="col-md-4">
      <div class="col-md-6">
        <p>shipping fee</p>
        <p>total fee</p>
      </div>
      <div class="col-md-6">
        <p class="shippingfee">EUR <input type="hidden" name="shippingfee" id="shippingfees2"><span id="shippingfees">xxx</span></input></p>
        <p class="totalfee">EUR <input type="hidden" name="totalfee" id="totalfees2"><span id="totalfees">xxx</span></input></p>
      </div>
    </div>
  </div>
..
</html>

toppage.js

$(document).ready(function(){
$('#countryselection').change(function(){
    if($('#countryselection').val()!='Germany'){
        var country = 'Other'
    }else{var country = 'Germany'}
    var priceforframe = document.delivery.framefees.value;
    $.ajax({ 
        type: 'GET', 
        url: '/shippingfee.php', 
        data: {'countryforshippingfee': country},
        dataType: 'json',
        success: function (data) { 
            document.getElementById("shippingfees2").value = data;
            $('#shippingfees').html(data);
            var total = data + 50;
            document.getElementById("totalfees2").value = total;
            $('#totalfees').html(total);
        }
    });
}); 
});
function submitForm(action){
  document.getElementById('forminreviewpage').action = action;
  document.getElementById('forminreviewpage').submit();
}

revieworder.php

<?php
  $options = $_POST['options'];
  $request = $_POST['request'];
  $size = $_POST['size'];
  $name = $_POST['name'];
  $country = $_POST['country'];
  $shippingfee = $_POST['shippingfee'];
  $totalfee = $_POST['totalfee'];
?>
<html>
..
<form id="forminreviewpage" name="confirmation" method="POST">
  <input type="hidden" name="options" value="<?= $options; ?>"/>
  <input type="hidden" name="request" value="<?= $request; ?>"/>
  <input type="hidden" name="size" value="<?= $size; ?>"/>
  <input type="hidden" name="name" value="<?= $name; ?>"/>
  <input type="hidden" name="country" value="<?= $country; ?>"/>
  <input type="hidden" name="shippingfee" value="<?= $shippingfee; ?>"/>
  <input type="hidden" name="totalfee" value="<?= $totalfee; ?>"/>
</form>
<div class="row">
  <div class="col-md-4">
    <div class="col-md-4">
      <p><?= $options; ?></p>
      <p><?= $request; ?></p>
      <p><?= $size; ?></p>
    </div>
    <div class="col-md-4">
      <button id="editbutton" onclick="submitForm('options.php')">Edit</button>
    </div>
  </div>
  <div class="col-md-4">
    <div class="col-md-4">
      <p><?= $name; ?></p>
      <p><?= $country; ?></p>
      <p><?= $shippingfee; ?></p>
      <p><?= $totalfee; ?></p>
    </div>
    <div class="col-md-4">
      <button id="editbutton" onclick="submitForm('deliveryinformation.php')">Edit</button>
    </div>
  </div>
  <div>
    <button id="orderbutton" onclick="submitForm('ordered.php')">Order</button></br>
  </div>
</div>

非常感谢您的帮助和问候，
Hiro

如果您自己设置会话变量，使用会话将使站点中的页面能够访问数据"池"。这可以很容易地在PHP中完成——请参阅W3上的这个页面了解基本细节，一旦你掌握了基本概念，网上还有很多其他网站可以轻松地浏览会话。

我不太确定你在第二个问题中问的是什么。是不是你想让第二个页面自动知道用户的国家/地区？如果是这样，这可以通过在上一页上分配会话变量或使用地理位置来实现-请参阅此处的帮助

至于问题三，实现适当的流是一个体系结构问题——您需要确保用户访问的页面只允许您想要的直通流。如果不花几个小时处理代码，我想当一个页面成功"完成"并准备好移动到下一个页面时，可以通过分配会话变量再次实现这一点。

会话功能强大，允许您控制大量用户数据，以简化他们在整个使用期间对您网站的体验。不过，只需小心您记录的会话数据——它应该始终是尽可能少的数量，并且不包含任何可能危及用户个人信息或帐户的数据——也就是说，不要存储他们的用户名和密码，如果他们通过身份验证，只需存储int"1"或"0"。

希望能有所帮助。

相关文章：