ajax请求+vue.js渲染+页面加载的示例

2018-02-17 19:16:31来源:作者:人点击

分享

1.导入js

<script type="text/javascript" src="<c:url value="/resources/lib/jquery/jquery-1.11.0.min.js" />"></script><!--标准mui.css--><link href="<c:url value=" rel="external nofollow" rel="external nofollow" /resources/mui/css/mui.min.css" />" rel="stylesheet"><!--App自定义的css--><link href="<c:url value=" rel="external nofollow" rel="external nofollow" /resources/mui/css/app.css" />" rel="stylesheet"><script src="<c:url value="/resources/vue/vue.js"/>"></script>

2.body主体

<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" id="searchInput" class="mui-input-clear" placeholder="">   </div>  </div>  <%--<div style="margin: 5px;margin-top: 10px;">   <input type="text" class="mui-input-clear" id="searchInput" 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;" onclick="submitSearch()">    搜索   </button>  </div>--%>  <div style="margin: 0 auto;clear: both;"></div>  <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="msgUl">   <li class="mui-table-view-cell" id="list" v-for="li in list" :key="li.orderBaseId">    <div class="mui-slider-right mui-disabled" @click="orderDetail(li.orderBaseId)">     <a class="mui-btn mui-btn-grey"<%-- v-bind:href="li" rel="external nofollow" --%>/>详情</a>    </div>    <div class="mui-table mui-slider-handle" @click="skipDetail(li.orderBaseId)">      <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;">姓名:{{li.customerName}}</h4>       </div>       <p class="">地址:{{li.customerAddress}}</p>      </div>    </div>   </li>  </ul> </div></div></body>

3.js代码块

<script src="<c:url value="/resources/mui/js/mui.min.js"/>"></script><script> var vm = new Vue({  el: '.main',  data: function () {   return {    list: []   }  },  methods: {   skipDetail: function (id) {    window.location.href = '/mobile/admin/orderBase/getOrderBaseEditPage.action?orderBaseId='+id;   },   orderDetail:function (id) {    window.location.href='/mobile/admin/orderDetails/getOrderDetailsListPage.action?orderBaseId='+id;   }  } }); var indexs=1; leavePage(); function leavePage(srh) {  if(srh==1){   indexs=1;   $("#msgUl").html("");  }  $.ajax({   url:'<c:url value="/mobile/admin/orderBase/getOrderBaseListJSON.action" />',   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(data.rows.length>0){     indexs+=1;    }    console.log(data);    vm.list.push.apply(vm.list,data.rows);    console.log(vm.list)   }  }); } $(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(); //滚动条距顶部距离(页面超出窗口的高度)   /* console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());   console.log("页面的文档高度 :"+$(document).height());   console.log('浏览器的高度:'+$(window).height());*/   totalheight = parseFloat($(window).height()) + parseFloat(srollPos);   if(($(document).height()-range) <= totalheight && num != maxnum) {    console.log(indexs);    /* indexs+=1;*/    leavePage();   }  }); }); //地址模糊搜索 $("#searchInput").change(function () {  /*alert($(".mui-input-clear").val());*/  leavePage(1); }) /* function submitSearch() {  leavePage(1); }*/  mui.init({  swipeBack:true //启用右滑关闭功能 });</script>

以上这篇ajax请求+vue.js渲染+页面加载的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持第七城市。

您可能感兴趣的文章:

  • vue.js,ajax渲染页面的实例

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台