ajax请求+渲染+页面加载

时间：2025-03-09 20:32:57
1.导入js
<script type="text/javascript" src="<c:url value="/resources/lib/jquery/jquery-1.11." />"></script>
<!--标准-->
<link href="<c:url value="/resources/mui/css/" />" rel="stylesheet">
<!--App自定义的css-->
<link href="<c:url value="/resources/mui/css/" />" rel="stylesheet">

<script src="<c:url value="/resources/vue/"/>"></script>

主体
<body>
<div class="main">
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">订单管理</h1>
    </header>
    <div class="mui-content">
        <div class="mui-content-padded" style="margin: 10px;margin-bottom: 0px;">
            <h5>请输入地址：</h5>
            <div class="mui-input-row mui-search">
                <input type="search"  class="mui-input-clear" placeholder="">
            </div>
        </div>
        <%--<div  style="margin: 5px;margin-top: 10px;">
            <input type="text" class="mui-input-clear"  placeholder="请输入地址" style="width: 78%;float: left;">
            <button type="submit" class="mui-btn mui-btn-primary" style="margin-left: 2%;width: 18%;margin-right: 2%;padding: 8.8px 12px;" οnclick="submitSearch()">
                搜索
            </button>
        </div>--%>
        <div style="margin: 0 auto;clear: both;"></div>
        <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" >

            <li class="mui-table-view-cell"  v-for="li in list" :key="">
                <div class="mui-slider-right mui-disabled" @click="orderDetail()">
                    <a class="mui-btn mui-btn-grey"<%-- v-bind:href="li"--%>/>详情</a>
                </div>
                <div class="mui-table mui-slider-handle" @click="skipDetail()">
                        <div class="mui-table-cell mui-col-xs-10">
                            <div class="mui-table-cell">
                                <h4 style="display: inline;float: left;width: 100px;margin-right: 130px;">姓名：{{}}</h4>
                            </div>
                            <p class="">地址：{{}}</p>
                        </div>
                </div>
            </li>

        </ul>
    </div>
</div>

</body>


代码块
 

<script src="<c:url value="/resources/mui/js/"/>"></script>
<script>
    var vm = new Vue({
        el: '.main',
        data: function () {
            return {
                list: []
            }
        },
        methods: {
            skipDetail: function (id) {
                 = '/mobile/admin/orderBase/?orderBaseId='+id;
            },
            orderDetail:function (id) {
                ='/mobile/admin/orderDetails/?orderBaseId='+id;
            }
        }
    });
    var indexs=1;
    leavePage();
    function leavePage(srh) {
        if(srh==1){
            indexs=1;
            $("#msgUl").html("");
        }
        $.ajax({
            url:'<c:url value="/mobile/admin/orderBase/" />',
            async:false,
            data:{
                customerAddress:$(".mui-input-clear").val(),
                page:indexs,
                rows:9
            },
            dataType:'json',//服务器返回json格式数据
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            type:'post',//HTTP请求类型
            success:function(data){
                if(>0){
                    indexs+=1;
                }
               (data);
                (,);
               ()
            }
        });
    }

    $(document).ready(function(){
        var range = 50; //距下边界长度/单位px
        var elemt = 500; //插入元素高度/单位px
        var maxnum = 20; //设置加载最多次数
        var num = 1;
        var totalheight = 0;
        var main = $(".mui-content"); //主体元素
        $(window).scroll(function(){
            var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
           /* ("滚动条到顶部的垂直高度: "+$(document).scrollTop());
            ("页面的文档高度 ："+$(document).height());
            ('浏览器的高度：'+$(window).height());*/
            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
            if(($(document).height()-range) <= totalheight && num != maxnum) {
                (indexs);
               /* indexs+=1;*/
               leavePage();
            }
        });
    });


    //地址模糊搜索
    $("#searchInput").change(function () {
        /*alert($(".mui-input-clear").val());*/
        leavePage(1);
    })

   /* function submitSearch() {
        leavePage(1);
    }*/

        ({
        swipeBack:true //启用右滑关闭功能
    });

</script>

相关文章