悠择商城项目之涉及知识点

悠择商城

1.元素绑定点击事件

　　

　　　//1.原生js,元素直接绑定onclick事件　
　　　<script type="text/javascript">
                //保存收货地址
        function save_address (){
                    alert("123")
                }
     </script>

　　　<div class="di5" style="width: 6.85rem;height: 0.9rem;margin: 0 auto;text-align: center;margin-top: 0.3rem;" onclick="save_address()">
            完成
　　　</div>

2.ajax请求

/**
 *项目中的js单独写到一个js文件中的 
 */
function save_address (){

    var url=basePath+"tradeFront/save_address.do";
    var form_data=$("#form").serialize();//表单数据序列化，
    $.post(url,form_data,function(back_data){
        alert(back_data);
    });
                
}

3.c;foreach

//示例1

<!-- 判断非空再循环 -->

<c:if test="${not empty address_list  }">　　

<c:forEach items="${address_list }" var="address" >
        <div class="li mui-row" style="width: 6.85rem;height: 0.66rem;margin: 0 auto;margin-top: 0.2rem;">
            <div class="li1 mui-col-xs-6" style="width: 1.3rem;height: 0.4rem;margin-left: 4.95rem;margin-top: 0.11rem;">
                添加新地址
            </div>
            <div class="li2 mui-col-xs-6" style="width: 0.26rem;height: 0.4rem;margin-top: 0.11rem;margin-left: 0.1rem;">
                <img src="img/jia.png" />
            </div>
        </div>
        <div class="li3 mui-row" style="width: 6.85rem;height: 2.3rem;margin: 0 auto;margin-top: 0.2rem;">
            <div class="li4 mui-row" style="width: 6.5rem;height: 0.4rem;margin: 0 auto;margin-top: 0.21rem;">
                <div class="li4_1 mui-col-xs-6" style="width: 4.75rem;height: 0.4rem;">
                    收货人：${address.shouhuoName }
                </div>
                <div class="li4_2 mui-col-xs-6" style="width: 1.75rem;height: 0.4rem;">
                    ${address.phone }
                </div>
            </div>
            <div class="li5 mui-row" style="width: 6.5rem;height: 0.8rem;margin: 0 auto;margin-top: 0.1rem;">
                收货地址：${address.addr }
            </div>
            <div class="li6 mui-row" style="width: 6.85rem;height: 1px;margin-top: 0.1rem;">
                
            </div>
            <div class="li7 mui-row" style="width: 6.5rem;height: 0.4rem;margin: 0 auto;margin-top: 0.1rem;">
                <div class="li7_1 mui-col-xs-3" style="width: 0.25rem;height: 0.4rem;">
                    <img src="img/xuanzhong.png" />
                </div>

　　　　　　　　　　<a href="${basePath}/shop/shop_bianjishouhuodizhi.jsp?id=${address.id }">
　　　　　　　　　　　　<div class="li7_3 mui-col-xs-3" style="width: 0.8rem;height: 0.4rem;margin-left: 3rem;">
　　　　　　　　　　　　<img src="img/bianji.png" />
　　　　　　　　　　　　</div>
　　　　　　　　　　</a>

                <div class="li7_3 mui-col-xs-3" style="width: 0.8rem;height: 0.4rem;margin-left: 3rem;">
                    <img src="img/bianji.png" />
                </div>

　　　　　　　　　　<!--　属性带id 　-->

　　　　　　　　　　<div addr_id="${address.id }" class="li7_4 mui-col-xs-3 delete_address" style="width: 0.8rem;height: 0.4rem;margin-left: 0.5rem;" >
　　　　　　　　　　　　<img src="img/shan.png" />
　　　　　　　　　　</div>

            </div>
        </div>
    </c:forEach>
    </c:if>

 4.再script中命名变量。其余的js中均可使用

　　

<script type="text/javascript" >var basePath = '${basePath}';</script>

5.mui绑定事件

/**
 * mui绑定事件
 * @returns
*/
$(function(){
    
    mui('body').on('tap','a',function(){
            window.top.location.href=this.href;
    });
    
    init_addr();
}); 

function init_addr(){
    //删除
    mui("body").on('tap','.delete_address',function(){
        
        var addr_id = $(this).attr("addr_id");
        
        var request_url=basePath+"tradeFront/delete_address.do";
        
        var request_data = {
                id:addr_id
        };

        ajax_post(request_url,request_data,function(back_data){
            
             window.location.href=basePath+"shop/shop_dizhiguanli.jsp";
        });
    }) 
    //设置默认
    mui("body").on('tap','.address_state',function(){
        
        var addr_id = $(this).attr("addr_id");
        
        var request_url=basePath+"v2/addressOper/change_address_state.do";
        
        var request_data = {
                id:addr_id
        };

        ajax_post(request_url,request_data,function(back_data){
            
            var json = eval("(" + back_data + ")");　　//解析返回的字符串为json对象再拿内容
             window.location.href=basePath+"shop/shop_dizhiguanli.jsp";
        });
    }) 
}

 6.checkbox提交数据

　

1，直接用Action提交，只会提交被选中的input
2. ajax异步提交，利用表单序列化提交数据。