求助：如何用Angular/Ajax实现添加商品到购物车时阻止页面刷新

1. 模板驱动表单场景 #

如果使用模板驱动表单，核心是阻止表单默认提交行为，同时调用添加购物车的异步方法：

<!-- 模板代码 -->
<form #addToCartForm="ngForm" (ngSubmit)="handleAddToCart($event, addToCartForm)">
  <input type="hidden" name="productId" [(ngModel)]="selectedProductId">
  <button type="submit">加入购物车</button>
</form>

// 组件代码
import { Component } from '@angular/core';
import { CartService } from './cart.service'; // 假设已定义购物车服务

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html'
})
export class ProductComponent {
  selectedProductId = '123'; // 示例商品ID

  constructor(private cartService: CartService) {}

  handleAddToCart(event: Event, form: any) {
    // 阻止默认提交导致的页面刷新
    event.preventDefault();
    
    // 调用购物车服务的添加接口
    this.cartService.addItem(this.selectedProductId).subscribe({
      next: (response) => {
        console.log('添加成功', response);
        // 这里可以执行UI更新，比如购物车计数+1、弹出提示
      },
      error: (err) => {
        console.error('添加失败', err);
      }
    });
  }
}

关键说明：

• 通过(ngSubmit)绑定表单提交事件，用event.preventDefault()直接阻断默认刷新逻辑
• 依赖Angular的HttpClient发起异步请求，全程无页面重载

2. 响应式表单场景 #

如果是响应式表单，逻辑类似，仅表单控制方式不同：

<!-- 模板代码 -->
<form [formGroup]="addToCartForm" (ngSubmit)="handleAddToCart($event)">
  <input type="hidden" formControlName="productId">
  <button type="submit">加入购物车</button>
</form>

// 组件代码
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { CartService } from './cart.service';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html'
})
export class ProductComponent implements OnInit {
  addToCartForm!: FormGroup;

  constructor(private fb: FormBuilder, private cartService: CartService) {}

  ngOnInit() {
    this.addToCartForm = this.fb.group({
      productId: ['123'] // 初始化商品ID
    });
  }

  handleAddToCart(event: Event) {
    event.preventDefault();
    
    const productId = this.addToCartForm.get('productId')?.value;
    this.cartService.addItem(productId).subscribe({
      next: () => {
        // 更新UI操作，比如更新购物车图标数字
      }
    });
  }
}

1. 原生JavaScript 实现 #

无需框架，直接用Fetch API发起异步请求：

<!-- HTML 代码 -->
<form id="addToCartForm">
  <input type="hidden" name="productId" value="123">
  <button type="submit">加入购物车</button>
</form>

// JS 代码
document.getElementById('addToCartForm').addEventListener('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();

  const productId = this.querySelector('input[name="productId"]').value;

  // 发起异步请求
  fetch('/api/cart/add', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ productId: productId })
  })
  .then(response => response.json())
  .then(data => {
    console.log('添加成功', data);
    // 执行UI更新，比如修改页面上的购物车数量
  })
  .catch(error => {
    console.error('添加失败', error);
  });
});

2. jQuery Ajax 实现 #

如果项目已引入jQuery，代码更简洁：

<!-- HTML 代码 -->
<form id="addToCartForm">
  <input type="hidden" name="productId" value="123">
  <button type="submit">加入购物车</button>
</form>

// jQuery 代码
$('#addToCartForm').on('submit', function(e) {
  e.preventDefault();

  const productId = $(this).find('input[name="productId"]').val();

  $.ajax({
    url: '/api/cart/add',
    method: 'POST',
    data: { productId: productId },
    success: function(data) {
      console.log('添加成功', data);
      // 执行UI更新操作
    },
    error: function(xhr, status, error) {
      console.error('添加失败', error);
    }
  });
});

关键说明：

• 核心逻辑都是通过e.preventDefault()阻断表单默认提交导致的页面刷新
• 用异步请求和后端交互，完成后仅更新前端UI，无需重载页面

内容的提问来源于stack exchange，提问作者user19502060