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 相关文章推荐
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 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计算2点经纬度之间的距离代码
2013/08/12 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
python写的一个文本编辑器
2014/01/23 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Django的性能优化实现解析
2019/07/30 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
python SocketServer源码深入解读
2019/09/17 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Python requests设置代理的方法步骤
2020/02/23 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
绩效工资分配方案
2014/01/18 职场文书
运动会解说词50字
2014/01/18 职场文书
保险公司晨会主持词
2014/03/22 职场文书
厂区绿化方案
2014/05/08 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
SpringBoot集成Redis的思路详解
2021/10/16 Redis
Nginx如何配置根据路径转发详解
2022/07/23 Servers