如何创建条纹产品时，使用javascript和php点击按钮

Question

我正在使用PHP代码在我的产品仪表板上创建产品，像这样:

StripeStripe::setApiKey('sk_test_51JxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxJhn');
$product = StripeProduct::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
StripeStripe::setApiKey('sk_test_51JxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxJhn');
$product = StripeProduct::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使用指南。