商品修改 - 商品管理系统 - 常规

<p>&lt;%@ page language='java' contentType='text/html; charset=UTF-8'
pageEncoding='UTF-8' %&gt;</p>
<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>商品管理 - 商品列表 - 修改</title>
    <!--全局CSS-->
    <link href='/css/bootstrap.min.css' rel='stylesheet'>
    <link href='/css/bootstrap-dialog.css' rel='stylesheet' type='text/css'/>
    <link href='/css/bootstrapValidator.min.css' rel='stylesheet' type='text/css'/>
    <link href='/static/plugins/bootstrap_table/Content/bootstrap-table.css' rel='stylesheet' type='text/css'/>
    <!--全局JS-->
    <script src='/js/jquery-2.1.4.min.js' type='text/javascript'></script>
    <script src='/js/bootstrap.min.js' type='text/javascript'></script>
    <script src='/static/plugins/bootstrap_table/Scripts/Bootstrap/ArbetTable.js' type='text/javascript'></script>
    <script src='/static/plugins/bootstrap_table/Scripts/Bootstrap/bootstrap-table.js' type='text/javascript'></script>
    <script src='/static/plugins/bootstrap_table/Scripts/Bootstrap/locale/bootstrap-table-zh-CN.js'
            type='text/javascript'></script>
    <script src='/static/plugins/layer/layer.js' type='text/javascript'></script>
    <script src='/static/plugins/laydate/laydate.js' type='text/javascript'></script>
    <!-- 对等js -->
    <script type='text/javascript'
            src='${pageContext.request.contextPath}/static/js/main/proMgr/productList_edit.js'></script>
</head>
<body>
<div class='loginbox registbox'>
    <!-- 隐藏域 -->
    <div class='form-group'>
        <input placeholder='商品名称' class='form-control'
               id='productName' name='name' style='width: 300px; margin: auto;'/ >
    </div>
    <div class='form-group'>
        <input placeholder='商品图片' type='text' class='form-control'
               id='productImage' name='price' style='width: 300px; margin: auto;'/ >
    </div>
    <div class='form-group'>
        <input placeholder='商品数量' type='text' class='form-control'
               id='productCount' name='price' style='width: 300px; margin: auto;'/ >
    </div>
    <div class='form-group'>
        <input placeholder='商品积分价格' type='text' class='form-control'
               id='productPrice' name='ddPrice' style='width: 300px; margin: auto;'/ >
    </div>
    <div class='form-group'>
        <input placeholder='商品描述' type='text' class='form-control'
               id='productBrief' name='ddPrice' style='width: 300px; margin: auto;'/ >
    </div>
    <div class='form-group' style='width: 300px; margin: auto;'>
        <select id='productState' style='width: 300px;' class='form-control'>
            <option value='0' selected='selected'>上架</option>
            <option value='1'>下架</option>
        </select>
    </div>
    <div class='form-group' style='padding-top:10px;line-height:80px;text-align: center;'>
        <button onclick='submit()' type='submit' name='submit' class='btn btn-primary' style='width: 300px;'>保存</button>
    </div>
</div>
</body>
<script type='text/javascript'>
</script>
</html>
//初始化参数
var proudctId;
var productName;
var productImage;
var productCount;
var productPrice;
var productBrief;
var productState;
<p>var ctx='http://localhost:6060/';</p>
<p>function closeWindow(){
//获取窗口索引
var index = parent.layer.getFrameIndex(window.name);
console.log('index: '+index);
parent.layer.close(index);
//刷新父页面
window.parent.location.reload();
}</p>
<p>function closeWindow(){
//向父窗口发送消息
parent.postMessage('closeWindow', '*');
}</p>
<p>//全局加载
$(function () {
//获取layer父窗口参数
var data = parent.layer.methodConfig.data;
//回显
$('#proudctId').val(data.proudctId);
$('#productName').val(data.productName);
$('#productImage').val(data.productImage);
$('#productCount').val(data.productCount);
$('#productPrice').val(data.productPrice);
$('#productBrief').val(data.productBrief);
$('#productState').val(data.productState);
});</p>
<p>//参数值收集
function collectParams(){
proudctId = $('#proudctId').val();
productName = $('#productName').val();
productImage = $('#productImage').val();
productCount = $('#productCount').val();
productPrice = $('#productPrice').val();
productBrief = $('#productBrief').val();
productState = $('#productState').val();
}</p>
<p>//用户修改
function submit(){
//参数值收集
collectParams();
//发送Ajax
$.ajax({
url:ctx+'/product/edit.do',
type:'POST',
data:{&quot;proudctId':proudctId,'productName':productName,'productImage':productImage,
'productCount':productCount,'productPrice':productPrice,
'productBrief':productBrief,'productState':productState,},
success:function(data){
//成功操作
if(data == true){
layer.msg('修改成功！');
//延迟关闭子窗口
setTimeout('closeWindow()', 1000);
}
//失败操作
else{
layer.msg('抱歉，修改失败！');
}
},
dataType:'json'
});</p>
<p>}</p>
<p>//修改
@RequestMapping('/product/edit.do')
@ResponseBody
@CrossOrigin(origins = '*', maxAge = 3600)
public boolean updateProudct(String productName,String proudctImage, Integer productCount, double productPrice, String productBrief,
int productState,int proudctId) {
boolean b = productService.updateProductById(productName, proudctImage, productCount, productPrice,
productBrief, productState, proudctId);
return b;
}
代码里的//全局加载
$(function () {
//获取layer父窗口参数
var data = parent.layer.methodConfig.data;
//回显
$('#proudctId').val(data.proudctId);
$('#productName').val(data.productName);
$('#productImage').val(data.productImage);
$('#productCount').val(data.productCount);
$('#productPrice').val(data.productPrice);
$('#productBrief').val(data.productBrief);
$('#productState').val(data.productState);
});
报出Uncaught DOMException: Blocked a frame with origin &quot;http://localhost:6060&quot; from accessing a cross-origin frame.内容：这个错误是因为浏览器的安全策略限制了跨域访问，当前页面与父页面不在同一个域名下，无法直接访问。可以使用postMessage方法来进行跨域通信，将数据从父页面传递到子页面。具体可以参考这篇文章：https://www.jianshu.com/p/bc398b6a2d2a</p>