單擊按鈕時如何使用 javascript 和 php 創建條紋產品

Question

我正在使用 PHP 代碼在我的產品儀表板中創建產品，如下所示：

\Stripe\Stripe::setApiKey('sk_test_51JxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxJhn');
$product = \Stripe\Product::create([
  'name' => 'test',
]);

所以我在這里要做的是，每當我點擊提交按鈕時，我都必須在我的條紋儀表板上創建產品：

   <button id="submit-button" type="submit"  class="btn btn-primary" >Submit</button>
<script>
const btn = document.getElementById("submit-button");
btn.addEventListener("click", e => {
               e.preventDefault();
<?php
\Stripe\Stripe::setApiKey('sk_test_51JxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxJhn');
$product = \Stripe\Product::create([
  'name' => 'test',
]);
?>

               })



    </script>

但是，無論何時重新加載頁面，它都會創建產品。 我只想要單擊按鈕時創建的產品！

Answer 1

現在，只要加載帶有按鈕的頁面，您的 PHP 代碼就會運行，因為按鈕代碼和 PHP 代碼都在同一位置，並且您沒有任何邏輯來阻止產品創建代碼運行。 您可能想將兩者分開。

例如，在button.php中你可能有這樣的東西：

<a href="create-product.php">Create Product</a>

然后在create-product.php中，您將擁有創建產品的代碼。

您可以使用 JavaScript 來執行此操作而無需導航到另一個頁面，該頁面看起來像這樣：

<button id="submit-button" type="button" class="btn btn-primary">Submit</button>

<script>
const btn = document.getElementById("submit-button");
btn.addEventListener("click", e => {
  e.preventDefault();
  fetch('create-product.php').then( /* Handle response */ );
});
</script>

在此示例中，創建產品的代碼也將位於單獨的文件中。 有關詳細信息，請參閱MDN 的 Fetch 使用指南。