如何将CSS和HTML元素呈现回客户端's浏览器从表单POST帐户和JavaScript

How to render CSS and HTML elements back to the Client's Browser from Form-POST acction and JavaScript?

本文关键字：浏览器 表单 POST JavaScript 客户端 HTML CSS 元素      更新时间：2023-09-26

我正在开发一个网站，允许用户在同行之间进行支付，我正在尝试通过JavaScript和HTML表单实现一个简单的机制，模拟Stripe提供的嵌入Checkout按钮的方法。（请参阅下面的Checkout按钮的Stripe示例代码）。

<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_czwzkTp2tactuLOEOqbMTRzG"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-image="/128x128.png">
  </script>
</form>

我对这种方法的问题如下：

  1. 为了呈现一个嵌入CSS和HTML元素的漂亮按钮，实现了什么逻辑
  2. 一旦用户点击按钮，传递自定义元素，如价格服务、服务描述等同样负责CSS和HTML的Javascript根据问题#1进行渲染？我们在谈论一首单曲吗处理一体化的Javascript文件？或者还有别的在引擎盖后面

提前感谢你的这篇文章，我只是想从专业的角度来看待我试图复制的东西。

在对Stripe一无所知的情况下，我可以猜测，当他们的脚本加载时，他们会在DOM中查询具有类条纹按钮的脚本元素。

然后，他们可能会将自己的按钮元素添加为该脚本元素的同级元素，并添加所有必要的处理程序。

这里有一个简单的例子：

checkout.js

jQuery(function ($) {
    var $script = $('script.stripe-button'), //find script el
        //create button
        $button = $('<button type="submit">').addClass('stripe-button').text($script.data('text'));

    $script
      //insert button after the script element
      .after($button)
      //listen to the submit event of the form
      .closest('form').submit(function (e) {
          console.log('performing checkout');
      });
});

HTML

<form>
    <script src="checkout.js" class="stripe-button" data-text="Checkout"></script>
</form>
相关文章：