悠擇商城

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非同步提交，利用表單序列化提交資料。