Javascript 如何使表单提交在页面内加载而不刷新

我是新的编码和卡住。我试图帮助建立一个网站，使用BoldCommerce来销售其产品。使用内置框功能。问题是： 步骤1：选择框大小。第二步：订单频率。第三步：选择选项

我们希望在您单击“选择选项”时动态加载内容，而不是发送到另一个页面。这样一来，潜在客户就可以更顺畅、更容易地导航（基本上，结账的步骤就更少了）

选择选项按钮将根据您选择的订单频率将您带到页面。例如，如果您从下拉列表中每隔两周单击一次，当您单击“选择选项”时，您将进入一个页面，其中所有产品将作为间隔两周的产品添加到购物车中

如何做到这一点？我在考虑Ajax，但不知道如何使用Ajax或jquery。只是作为一个初学者。先谢谢你

我想到了另一条路线，但需要一些指导。在这份表格中，我复制了一份4周的表格，我想知道如何制作某种频率变换器，使我的膳食选择保持一致？直到客户选择频率

其代码如下： 数据={“表格类型”：“产品”、“utf8”：“\u2713”、“id”：“32144866377813”、“粗体-滚动选择器”单选按钮”：“3”、“频率-数量”：“4”、“频率-类型”：“2”、“频率-类型-文本”：“周”、“组id”：“137396”、“折扣价格”：“\u00a349.95”、“滚动折扣百分比”：“0”、“滚动-无格式价格”：“4995”、“CSU粗体-滚动-滚动-滚动-滚动-滚动-滚动-滚动-无格式”代币“De73739f089f307f307f36b3rf”，“数量：”[“1”]，“产品id:”[“4624953606229”]，“变体id:”[“32144866377813”]，“备注：”，“shopify_客户id:”，“电子邮件：”，“地址1:““地址2:”，“城市：”，“公司：”，“国家：“，“名字：”，“姓氏：”，“电话：“，“省：”，“邮政编码：”，“设计主题id:“81617551445”，“框架标志”：”O4TFHWU6WG6NAUT6JXJ7PMF0AGSTOD2ROI4VT2KIFKPLEADTVQ-DHJLVCVIMAOF4QT2LSDPNPNRLDZ8BYXDZ1VQT_YJgsa8W7ulYrrLOh-UN20FZ2JVRFSWQMVFAEXNUWGSGJCB11IPXDCPCW==”； 数据['properties']=（！data['properties']）？{}：数据['properties']； 数据['attributes']=（！data['attributes']）？{}：数据['attributes']； 数据[“属性”][“ro_订阅”框选项]=[]； jQuery（'.bold-product\uuuu QUOTE-val'）。每个（函数（索引）{ var slot=jQuery（this）.data（'slot-id'）； var quantity=parseInt（jQuery（this.val（））； 数据['properties']['ro\u订阅框\u选项].推送({ “槽”：槽， “数量”：数量， }); }))

有关守则如下： 对于下拉频率菜单：

<div class="bold-ro__radio-div bold-ro__recurring-div bold-ro__bold-active bold-ro__sub">
<label class="bold-ro__recurring-lbl">
<input type="hidden" value="3" name="bold-ro__selector_radio_button" class="bold-ro__sub-box-radio-btn" checked="">
<span class="bold-ro__recurring-text bold-ro__subscription-only"></span>
</label>
<span class="bold-ro__see-details"><a href="javascript:;" class="bold-ro__detail-tooltip needsclick" aria-describedby="tooltip_2cbv5ccyi2">See details</a><div class="bold-ro__tooltip" role="tooltip" id="tooltip_2cbv5ccyi2" aria-hidden="true" x-placement="bottom" style="position: absolute; transform: translate3d(5px, 537px, 0px); top: 0px; left: 0px; will-change: transform; display: none;"><div class="tooltip-arrow" style="left: 55px;"></div><div class="tooltip-inner"><div align="left">
<div><strong>Subscription Details</strong></div>
<div>
<ul>
<li>Set it and forget it!</li>
<li>Pause, edit or cancel anytime.</li>
</ul>
</div>
</div></div></div></span>
<div class="bold-ro__frequency-div">
<div class="bold-ro__frequency-label">
<div class="bold-ro__order-interval-container">
<span class="bold-ro__order-interval-lbl">Select your order interval</span>
<select class="bold-ro__order-interval">
<option data-frequency-type="2" data-frequency-num="1" data-frequency-type-text="Week(s)" value="2-1">Deliver every 1 Week(s)</option>
<option data-frequency-type="2" data-frequency-num="2" data-frequency-type-text="Week(s)" value="2-2">Deliver every 2 Week(s)</option>
<option data-frequency-type="2" data-frequency-num="3" data-frequency-type-text="Week(s)" value="2-3">Deliver every 3 Week(s)</option>
<option data-frequency-type="2" data-frequency-num="4" data-frequency-type-text="Week(s)" value="2-4">Deliver every 4 Week(s)</option>
<option data-frequency-type="2" data-frequency-num="5" data-frequency-type-text="Week(s)" value="2-5">Deliver every 5 Week(s)</option>
<option data-frequency-type="2" data-frequency-num="6" data-frequency-type-text="Week(s)" value="2-6">Deliver every 6 Week(s)</option>
</select>

</div>
<input type="hidden" name="frequency_num" class="bold-ro__frequency-num" value="1">
<input type="hidden" name="frequency_type" class="bold-ro__frequency-type" value="2">
<input name="frequency_type_text" class="bold-ro__frequency-type-text" type="hidden" value="Week(s)">

<input type="hidden" class="bold-ro__group-id" name="group_id" value="137396">
<input type="hidden" class="bold-ro__discounted-price" value="£49.95" name="discounted_price">
<input type="hidden" class="bold-ro__discount-percentage" value="0" name="_ro_discount_percentage">
<input type="hidden" class="bold-ro__unformatted-price" value="4995" name="_ro_unformatted_price">
<input type="hidden" name="csrf_bold_token" value="de9c7d13738ffca80fd74b489f06b3be">
<input type="hidden" name="quantities[]" value="">
<input type="hidden" name="product_id[]" value="4624953606229">
<input type="hidden" name="variant_id[]" value="32144866377813">
<input type="hidden" name="note" value="">



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

订阅详细信息

设定它，然后忘记它
随时暂停、编辑或取消

选择您的订购间隔
每1周交付一次
每2周交付一次
每3周交付一次
每4周交付一次
每5周交付一次
每6周交付一次

对于“选择选项”按钮：

<button class="btn button bold-ro__custombutton-4624953606229">Select Choices</button>

选择选项

以及：

添加到购物车

下面是与按钮相关的JS

<button class="btn button bold-ro__custombutton-4624953606229">Select Choices</button><button type="submit" name="add" aria-label="Add to cart" class="btn product-form__cart-submit btn--secondary-accent cartbutton" data-add-to-cart="" style="display: none;">
<span data-add-to-cart-text="">

Add to cart

</span>
<span class="hide" data-loader="">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"></path></svg>
</span>
</button>

<div data-shopify="payment-button" class="shopify-payment-button"><button class="shopify-payment-button__button shopify-payment-button__button--unbranded shopify-payment-button__button--hidden" disabled="disabled" aria-hidden="true">&nbsp;</button><button class="shopify-payment-button__more-options shopify-payment-button__button--hidden" disabled="disabled" aria-hidden="true">&nbsp;</button></div>

</div>
</div>
<div class="page-container drawer-page-content" id="PageContainer">

<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
<link href="https://ro.boldapps.net/app_assets/css/bold.modal.css" rel="stylesheet">
<link href="https://ro.boldapps.net/app_assets/css/bold.grid.css" rel="stylesheet">
<link href="https://ro.boldapps.net/app_assets/css/bold.product.css" rel="stylesheet">
<link href="https://ro.boldapps.net/app_assets/css/bold.ro.css" rel="stylesheet">
<script>
window.BOLD = window.BOLD || {};
window.BOLD.recurring_orders = window.BOLD.recurring_orders || {};
window.BOLD.recurring_orders.subscription_box window.BOLD.recurring_orders.subscription_box || {};
window.BOLD.recurring_orders.subscription_box.product_id = 4624953606229;
window.BOLD.recurring_orders.subscription_box.variant_id = 32144866377813;
</script>

选择选项
添加到购物车
window.BOLD=window.BOLD |{}；
window.BOLD.recurtive_orders=window.BOLD.recurtive_orders | |{}；
window.BOLD.recurtive_orders.subscription_box window.BOLD.recurtive_orders.subscription_box | |{}；
window.BOLD.recurtive_orders.subscription_box.product_id=4624953606229；
window.BOLD.recurtive_orders.subscription_box.variant_id=32144866377813；

如果您想在不重新加载页面的情况下刷新/加载/更改数据，您必须使用某种形式的AJAX。您尝试过什么？您的问题中没有Javascript，也没有任何后端代码？您的后端是什么？有这么多AJAX教程，这里有答案，您尝试过其中任何一种吗？使用jQuery和PHP。@D在'tPanic嘿，我刚刚更新了代码，加入了我用atom找到的JS。我已经尝试过了，但是我真的不够高级。谢谢你的帮助。我认为你需要后退一步，评估你正在尝试做的事情。AJAX允许你向服务器发出请求，在不更改或重新加载当前数据的情况下检索一些新数据页面。因此，如果您的客户选择了widget X，并且您需要检查数据库以确定其是否有库存，您可以使用Javascript向后端发出AJAX请求以确定库存。然后Javascript将获取响应并更新页面以显示它。因此，如果您需要根据用户的需求从后端加载更多信息，您可以使用该方法s的选择，而不更改/重新加载页面。@不要更改，谢谢。我理解。这是有意义的。我们基本上是在尝试这样做：客户单击“购物”页面。然后，客户将面临第1步（选择送餐频率）和第2步（选择膳食）。两者都应该经常出现在屏幕上。根据当前设置，它会显示一个临时页面，在该页面中，客户单击“商店”，然后单击“餐盒X”，然后选择频率，然后单击“选择选项”。然后，他们会被带到另一个页面，在该页面中，他们将餐食添加到篮子中，以组成餐盒。我们觉得这中间有很多步骤。我们只是希望如此方法类似于allplants.com如果你想在不重新加载页面的情况下刷新/加载/更改数据，你必须使用某种形式的AJAX。你尝试过什么？你的问题中没有Javascript，也没有任何后端代码？你的后端是什么？有这么多AJAX教程，这里有答案，你尝试过其中任何一种吗？使用jQuery和PHP。@别担心，我刚刚更新了代码，加入了我在atom中找到的JS。我已经尝试过了，但我真的不够高级。谢谢你的帮助。我认为你需要后退一步，评估一下你正在尝试做的事。AJAX允许你向服务器发出请求，在不更改的情况下检索一些新数据或者重新加载当前页面。因此，如果您的客户选择了widget X，并且您需要检查数据库以确定它是否有库存，那么您可以使用Ja

<button class="btn button bold-ro__custombutton-4624953606229">Select Choices</button><button type="submit" name="add" aria-label="Add to cart" class="btn product-form__cart-submit btn--secondary-accent cartbutton" data-add-to-cart="" style="display: none;">
<span data-add-to-cart-text="">

Add to cart

</span>
<span class="hide" data-loader="">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"></path></svg>
</span>
</button>

<div data-shopify="payment-button" class="shopify-payment-button"><button class="shopify-payment-button__button shopify-payment-button__button--unbranded shopify-payment-button__button--hidden" disabled="disabled" aria-hidden="true">&nbsp;</button><button class="shopify-payment-button__more-options shopify-payment-button__button--hidden" disabled="disabled" aria-hidden="true">&nbsp;</button></div>

</div>
</div>
<div class="page-container drawer-page-content" id="PageContainer">

<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
<link href="https://ro.boldapps.net/app_assets/css/bold.modal.css" rel="stylesheet">
<link href="https://ro.boldapps.net/app_assets/css/bold.grid.css" rel="stylesheet">
<link href="https://ro.boldapps.net/app_assets/css/bold.product.css" rel="stylesheet">
<link href="https://ro.boldapps.net/app_assets/css/bold.ro.css" rel="stylesheet">
<script>
window.BOLD = window.BOLD || {};
window.BOLD.recurring_orders = window.BOLD.recurring_orders || {};
window.BOLD.recurring_orders.subscription_box window.BOLD.recurring_orders.subscription_box || {};
window.BOLD.recurring_orders.subscription_box.product_id = 4624953606229;
window.BOLD.recurring_orders.subscription_box.variant_id = 32144866377813;
</script>