lovecoding
/
J250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编辑商品</title>
  <script src="../js/jquery-2.1.4.js"></script>
  <style>
    /* 全局样式重置 - 统一跨浏览器样式，消除默认边距，和其他页面保持一致 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft Yahei", sans-serif;
    }

    /* 页面背景 - 浅灰背景，flex实现表单垂直+水平居中，适配所有屏幕 */
    body {
      background-color: #f5f5f5;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    /* 表单容器 - 白色卡片、圆角、轻阴影，和新增/登录页样式统一，提升层次感 */
    form {
      background-color: #ffffff;
      padding: 40px 35px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 450px;
    }

    /* 表单标题 - 居中显示，配色和字体统一，底部加间距，明确页面用途 */
    form h2 {
      text-align: center;
      color: #333333;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 30px;
    }

    /* 标签样式 - 固定宽度+右对齐，排版整齐，和新增商品页布局一致 */
    form label {
      display: inline-block;
      width: 90px;
      text-align: right;
      color: #666666;
      font-size: 16px;
      margin-right: 15px;
    }

    /* 输入框统一样式 - 文本框/数字框共用，美化边框、内边距，聚焦有高亮 */
    input[type="text"],
    input[type="number"] {
      width: calc(100% - 110px);
      padding: 12px 15px;
      margin: 8px 0 18px 0;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
      font-size: 16px;
      color: #333;
      transition: all 0.3s ease;
      outline: none;
    }

    /* 输入框聚焦效果 - 蓝色主色调高亮，和其他页面交互效果统一，提升体验 */
    input[type="text"]:focus,
    input[type="number"]:focus {
      border-color: #409eff;
      box-shadow: 0 0 6px rgba(64, 158, 255, 0.2);
    }

    /* 数字框去除默认上下箭头 - 美化外观，不影响库存数字输入功能 */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* 保存按钮样式 - 通栏显示，蓝色主色调，和新增页按钮样式完全一致 */
    input[type="button"] {
      width: 100%;
      padding: 12px 0;
      border: none;
      border-radius: 4px;
      background-color: #409eff;
      color: #ffffff;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-top: 10px;
    }

    /* 按钮hover/active效果 - 加深颜色，有点击反馈，提升交互体验 */
    input[type="button"]:hover {
      background-color: #337ecc;
    }
    input[type="button"]:active {
      background-color: #266fc8;
    }
  </style>
</head>
<body>
<form action="#">
  <!-- 表单标题改为【编辑商品】，明确页面功能 -->
  <h2>编辑商品</h2>
  <!-- 隐藏域保留，无需样式，不影响布局 -->
  <input type="hidden" name="id" id="id">

  <label for="productName">商品名称：</label>
  <input type="text" name="productName" id="productName"><br>

  <label for="stocket">商品库存：</label>
  <input type="number" name="stocket" id="stocket"><br>

  <label for="title">商品标题：</label>
  <input type="text" name="title" id="title"><br>

  <input type="button" value="保存" onclick="edit()">
</form>

<script>
  function edit(){
    var id = document.getElementById("id").value
    var productName = document.getElementById("productName").value
    var title = document.getElementById("title").value
    var stocket = document.getElementById("stocket").value
    // 新增简单非空校验，避免空数据提交
    if(!productName || !stocket || !title){
      alert("商品名称、库存、标题不能为空！");
      return;
    }
    var obj = {id:id,productName:productName,title:title,stocket:stocket}
    $.post("http://c46a5489.natappfree.cc/product/update",obj,function (result){
      if(result.success){
        // 重新跳转回product.html界面中
        location.href = "/js-demo-day02/js-demo-day02/demo/product.html"
      }else{
        alert(result.msg || "编辑失败，请重试");
      }
    },"json") // 指定返回格式为JSON，避免解析异常
            .fail(function(){
              alert("网络错误，编辑请求发送失败！");
            });
  }

  // 封装获取地址栏参数的通用函数（放在调用前，避免函数未定义报错）
  function getUrlParam(name) {
    const search = window.location.search.substring(1);
    const params = search.split('&');
    for (let i = 0; i < params.length; i++) {
      const pair = params[i].split('=');
      if (pair[0] === name) {
        return decodeURIComponent(pair[1] || '');
      }
    }
    return '';
  }

  // 获取地址栏ID并请求商品详情回显
  var id = getUrlParam("id")
  // 新增ID非空校验，避免无ID时发送无效请求
  if(!id){
    alert("未获取到商品ID，无法编辑！");
  }else{
    console.log("当前编辑商品ID：", id);
    $.get("http://c46a5489.natappfree.cc/product/get?id="+id,function(result){
      if(result.success){
        // 返回result {success: true,msg: 操作成功,data: Product}
        var product = result.data
        // 把返回数据设置到输入框中
        document.getElementById("id").value = product.id
        document.getElementById("productName").value = product.productName
        document.getElementById("title").value = product.title
        document.getElementById("stocket").value = product.stocket
      }else{
        alert(result.msg || "获取商品详情失败");
      }
    },"json")
            .fail(function(){
              alert("网络错误，获取商品详情失败！");
            });
  }
</script>
</body>
</html>