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


Posted in Javascript onFebruary 11, 2018

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渲染+页面加载的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
js和jquery中获取非行间样式
May 05 jQuery
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
微信小程序实现评论功能
Nov 28 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
vue组件添加事件@click.native操作
Oct 30 Javascript
vue.js,ajax渲染页面的实例
Feb 11 #Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 #Javascript
vue中引用阿里字体图标的方法
Feb 10 #Javascript
Express进阶之log4js实用入门指南
Feb 10 #Javascript
Vue完整项目构建(进阶篇)
Feb 10 #Javascript
JS简单获得节点元素的方法示例
Feb 10 #Javascript
JS简单添加元素新节点的方法示例
Feb 10 #Javascript
You might like
php5新改动之短标记启用方法
2008/09/11 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php+highchats生成动态统计图
2014/05/21 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
JavaScript运算符小结
2015/06/03 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
Python函数嵌套实例
2014/09/23 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python实现网站表单提交和模板
2019/01/15 Python
python爬虫中多线程的使用详解
2019/09/23 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
2015年宣传思想工作总结
2015/05/22 职场文书
疾病证明书
2015/06/19 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
MySQL数据库事务的四大特性
2022/04/20 MySQL