在javascript中提交表单时动态导入模块

b5lpy0ml  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(302)

a有一个“添加到篮子”按钮,该按钮通过ajax提交一个包含所有产品详细信息的表单。此时,当加载网站时,负责该操作的模块会立即加载。不过,我希望它只在单击按钮时加载。这就是我到目前为止所做的:

  1. $('form:not(.contact-form__items)').on('submit', event => {
  2. import('./modules/adding-products-to-basket.js')
  3. .then(module => {
  4. module.AddingProductsToBasket.addProductToBasket(event);
  5. });
  6. });

模块内容:

  1. export const AddingProductsToBasket = {
  2. addProductToBasket (event) {
  3. const _this = AddingProductsToBasket;
  4. event.preventDefault();
  5. $.ajax({
  6. url: 'basket',
  7. method: 'POST',
  8. data: $(event.currentTarget).serialize(),
  9. dataType: 'text',
  10. success: function(response) {
  11. _this.openAddedToBasketLightbox();
  12. }
  13. },
  14. });
  15. }
  16. };

我没有在控制台中得到任何错误,但问题是 event.preventDefault() 在…内 addProductToBasket 不做它的工作,所以用户被带到篮子页面,而不是停留在“添加到篮子”按钮所在的页面上。

6fe3ivhb

6fe3ivhb1#

谢谢你们两位的帮助。它正在工作。
在窗体显示以下内容时加载模块:

  1. if ($('form:not(.contact-form__items)').length) {
  2. import('./modules/adding-products-to-basket.js')
  3. .then(module => {
  4. $('form:not(.contact-form__items)').on('submit', event => {
  5. module.AddingProductsToBasket.addProductToBasket(event);
  6. });
  7. });
  8. }

不是在表单加载时加载模块,而是在表单提交时加载模块:( event.preventDefault() 在里面 AddingProductsToBasket() (可以删除)

  1. $('form:not(.contact-form__items)').on('submit', event => {
  2. event.preventDefault();
  3. import('./modules/adding-products-to-basket.js')
  4. .then((module) => {
  5. module.AddingProductsToBasket.addProductToBasket(event);
  6. });
  7. });
展开查看全部

相关问题