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 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
jQuery Ajax文件上传(php)
Jun 16 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
js实现课堂随机点名系统
Nov 21 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
php include加载文件两种方式效率比较
2010/08/08 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
js控制frameSet示例
2013/09/10 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JS解析XML实例分析
2015/01/30 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
Python读取图片属性信息的实现方法
2016/09/11 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
金融专业个人求职信
2013/09/22 职场文书
应聘护士自荐信
2013/10/21 职场文书
班级寄语大全
2014/04/10 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
开票证明
2015/06/23 职场文书
军训通讯稿范文
2015/07/18 职场文书