JavaScript 加入购物车按钮点击事件代码示例 - 使用 Axios 和 SweetAlert - 常规

{ "title": "JavaScript 加入购物车按钮点击事件代码示例 - 使用 Axios 和 SweetAlert", "description": "本文提供了一个 JavaScript 代码示例，演示了如何使用 Axios 和 SweetAlert 库实现加入购物车按钮的点击事件，并处理不同 HTTP 状态码的错误。", "keywords": "JavaScript, 加入购物车, 按钮点击事件, Axios, SweetAlert, HTTP 状态码, 错误处理", "content": ""document.addEventListener("DOMContentLoaded", function() {\n // 加入购物车按钮点击事件\n const addToCartBtn = document.querySelector('.btn-add-to-cart');\n addToCartBtn.addEventListener('click', function() {\n // 请求加入购物车接口\n axios.post('{{ route('cart.add') }}', {\n sku_id: document.querySelector('label.active input[name=skus]').value,\n amount: document.querySelector('.cart_amount input').value,\n })\n .then(function() { // 请求成功执行此回调\n swal('加入购物车成功', '', 'success');\n })\n .catch(function(error) { // 请求失败执行此回调\n if (error.response.status === 401) {\n // http 状态码为 401 代表用户未登陆\n swal('请先登录', '', 'error');\n } else if (error.response.status === 422) {\n // http 状态码为 422 代表用户输入校验失败\n var html = '

';\n Object.values(error.response.data.errors).forEach(function(errors) {\n errors.forEach(function(error) {\n html += error + '
';\n })\n });\n html += '

';\n swal({content: $(html)[0], icon: 'error'})\n } else {\n // 其他情况应该是系统挂了\n swal('系统错误', '', 'error');\n }\n });\n });\n});\n"\n}