前端无法获取category的值
来源:8-9 商品编辑之前端实现

weixin_慕丝6290347
2022-03-07
<!-- 目录 下拉列表 -->
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<div class="item-title label">目录</div>
<div class="item-input">
<select id="category">
</select>
</div>
</div>
</div>
</li>
$(function() {
//从URL里获取productId参数的值
var productId = getQueryString('productId');
//通过productId获取商品信息的URL
var infoUrl = '/o2o/shopadmin/getproductbyid?productId=' + productId;
//获取当前店铺设定的商品类别列表的URL
var categoryUrl = '/o2o/shopadmin/getproductcategorylist';
//更新商品信息的URL
var productPostUrl = '/o2o/shopadmin/modifyproduct';
//由于商品添加和编辑使用的是同一个页面
//该标识符用来标明本次是添加还是编辑操作
var isEdit = false;
if (productId) {
//若有productId则为编辑操作
getInfo(productId);
isEdit = true;
} else {
getCategory();
productPostUrl = '/o2o/shopadmin/addproduct';
}
//获取需要编辑的商品的商品信息,并赋值给表单
function getInfo(id) {
$
.getJSON(
infoUrl,
function(data) {
if (data.success) {
//从返回的JSON当中获取product对象的信息,并赋值给表单
var product = data.product;
$('#product-name').val(product.productName);
$('#product-desc').val(product.productDesc);
$('#priority').val(product.priority);
$('#normal-price').val(product.normalPrice);
$('#promotion-price').val(
product.promotionPrice);
//获取原本的商品类别以及该店铺的所有商品类别列表
var optionHtml = '';
var optionArr = data.productCategoryList;
var optionSelected = product.productCategory.productCategoryId;
//生成前端的HTML商品类别列表,并默认选择编辑前的商品类别
optionArr
.map(function(item, index) {
var isSelect = optionSelected === item.productCategoryId ? 'selected'
: '';
optionHtml += '<option data-value="'
+ item.productCategoryId
+ '"'
+ isSelect
+ '>'
+ item.productCategoryName
+ '</option>';
});
$('#category').html(optionHtml);
}
});
}
//为商品添加操作提供该店铺下所有的商品类别列表
function getCategory() {
$.getJSON(categoryUrl, function(data) {
if (data.success) {
var productCategoryList = data.data;
var optionHtml = '';
productCategoryList.map(function(item, index) {
optionHtml += '<option data-value="'
+ item.productCategoryId + '">'
+ item.productCategoryName + '</option>';
});
$('#category').html(optionHtml);
}
});
}
//针对商品详情图控件组,若该控件组的最后一个元素发生变化(即上传了图片)
//且控=控件总数未达到6个,则生成一个新的文件上传控件
$('.detail-img-div').on('change', '.detail-img:last-child', function() {
if ($('.detail-img').length < 6) {
$('#detail-img').append('<input type="file" class="detail-img">');
}
});
//提交按钮的事件响应,分别对商品添加和编辑做出不同的响应
$('#submit').click(
function() {
//创建商品json对象,并从表单里面获取对应的属性值
var product = {};
product.productName = $('#product-name').val();
product.productDesc = $('#product-desc').val();
product.priority = $('#priority').val();
product.normalPrice = $('#normal-price').val();
product.promotionPrice = $('#promotion-price').val();
//获取选定的商品类别值
product.productCategory = {
productCategoryId : $('#category').find('option').not(
function() {
return !this.selected;
}).data('value')
};
product.productId = productId;
//获取缩略图文件流
var thumbnail = $('#small-img')[0].files[0];
console.log(thumbnail);
//生成表单对象,用于接收参数并传递给后台
var formData = new FormData();
formData.append('thumbnail', thumbnail);
//遍历商品详情图控件,获取里面的文件流
$('.detail-img').map(
function(index, item) {
//判断该控件是否已选择了文件
if ($('.detail-img')[index].files.length > 0) {
//将第i个文件流赋值给key为productImgi的表单键值对里
formData.append('productImg' + index,
$('.detail-img')[index].files[0]);
}
});
//将product json对象转成字符流保存至表单对象key为productStr的键值对里
formData.append('productStr', JSON.stringify(product));
//获取表单里输入的验证码
var verifyCodeActual = $('#j_captcha').val();
if (!verifyCodeActual) {
$.toast('请输入验证码!');
return;
}
//将数据提交至后台处理相关操作
formData.append("verifyCodeActual", verifyCodeActual);
$.ajax({
url : productPostUrl,
type : 'POST',
data : formData,
contentType : false,
processData : false,
cache : false,
success : function(data) {
if (data.success) {
$.toast('提交成功!');
$('#captcha_img').click();
} else {
$.toast('提交失败!');
$('#captcha_img').click();
}
}
});
});
});
写回答
1回答
-
翔仔
2022-03-07
光看代码没法精确定位问题,需要你前后端调试一下,看看后端这块是否能获取到category并返回。
00
相似问题
前端获取不了数据库区域,店铺类别等信息
回答 6
后台无法获取前端的值
回答 3
无法获取从json中获取数据
回答 2
前端Formdata获取不到值
回答 1
店铺休息修改 前端调试问题
回答 1