ajax request + vue.js rendering + page loading
Below I will share with you an example of ajax request vue.js rendering page loading, which has a good reference value and I hope it will be helpful to everyone.
1.Import 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>
<p 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>
<p class="mui-content">
<p class="mui-content-padded" style="margin: 10px;margin-bottom: 0px;">
<h5>请输入地址：</h5>
<p class="mui-input-row mui-search">
<input type="search" id="searchInput" class="mui-input-clear" placeholder="">
</p>
</p>
<%--<p 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>
</p>--%>
<p style="margin: 0 auto;clear: both;"></p>
<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">
<p 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>
</p>
<p class="mui-table mui-slider-handle" @click="skipDetail(li.orderBaseId)">
<p class="mui-table-cell mui-col-xs-10">
<p class="mui-table-cell">
<h4 style="display: inline;float: left;width: 100px;margin-right: 130px;">姓名：{{li.customerName}}</h4>
</p>
<p class="">地址：{{li.customerAddress}}</p>
</p>
</p>
</li>
</ul>
</p>
</p>
</body>3.js code block
<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>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to use template in Vue2 template
##How to create components in Vue
How to use Eslint in Vue-cli to implement automatic formatting
The above is the detailed content of ajax request + vue.js rendering + page loading. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement page loading progress bar function in JavaScript?
Oct 27, 2023 am 08:57 AM
How does JavaScript implement the page loading progress bar function? In modern Internet applications, page loading speed is one of the key factors of user experience. To show users the loading process, many websites and applications use loading progress bars. JavaScript provides a simple and effective way to implement the page loading progress bar function. The specific implementation process is as follows: Create an HTML structure. First, create an HTML structure of a progress bar at a suitable location on the page. It is common to place the progress bar in
How to extend the timeout of Ajax requests?
Jan 26, 2024 am 10:09 AM
How to extend the expiration time of Ajax requests? When making network requests, we often encounter situations where we need to process large amounts of data or complex calculations, which may cause the request to time out and fail to return data normally. In order to solve this problem, we can ensure that the request can be completed successfully by extending the expiration time of the Ajax request. The following will introduce some methods and specific code examples to extend the expiration time of Ajax requests. When making an Ajax request using the timeout attribute, you can set the timeout attribute to
How long does it take for ajax requests to expire?
Nov 20, 2023 am 10:29 AM
AJAX requests have no fixed expiration time: "Asynchronous JavaScript and XML" is a technology for sending asynchronous requests on web pages, which uses JavaScript to send requests to the server and receive responses without refreshing the entire page.
How to use controllers to handle Ajax requests in the Yii framework
Jul 28, 2023 pm 07:37 PM
In the Yii framework, controllers play an important role in processing requests. In addition to handling regular page requests, controllers can also be used to handle Ajax requests. This article will introduce how to handle Ajax requests in the Yii framework and provide code examples. In the Yii framework, processing Ajax requests can be carried out through the following steps: The first step is to create a controller (Controller) class. You can inherit the basic controller class yiiwebCo provided by the Yii framework
How to choose the right Ajax request library for your project
Jan 30, 2024 am 08:32 AM
Practical guide: Which Ajax request libraries are suitable for your project? With the continuous development of front-end development, Ajax has become an indispensable part of web development. Choosing an Ajax request library suitable for the project is crucial to improving development efficiency and optimizing user experience. This article will introduce several commonly used Ajax request libraries to help readers choose the tool suitable for their own projects. jQueryAjax There is no denying that jQuery is one of the most popular JavaScript libraries out there. It provides a rich
Essential tools: Understand what are the commonly used Ajax request libraries?
Jan 30, 2024 am 11:00 AM
Development essentials: Explore what are the commonly used Ajax request libraries? In modern front-end development, using Ajax for asynchronous requests has become a standard feature, and choosing an appropriate Ajax request library can allow us to process network requests more efficiently, improving development efficiency and user experience. This article will explore some commonly used Ajax request libraries to help developers choose the tools suitable for their projects. jQueryAjax: As one of the most popular JavaScript libraries, jQuery provides powerful Ajax request functions.
How to optimize page loading animation issues in Vue development
Jun 29, 2023 pm 09:22 PM
How to optimize page loading animation in Vue development Summary: In Vue development, page loading animation is an important part of improving user experience. However, when the page has a lot of content or the network is slow, the loading animation may cause lag or delay. This article will explore how to optimize page loading animation in Vue development to improve user experience. Introduction: With the development of the Internet, users have higher and higher requirements for web page loading speed. As one of the current mainstream front-end frameworks, Vue provides a wealth of solutions for page loading animations.
Can I customize the expiration time of Ajax requests?
Jan 26, 2024 am 11:13 AM
Can the expiration time of Ajax requests be customized? In web development, we often use Ajax to implement asynchronous requests to dynamically load data in the page. When making Ajax requests, sometimes we need to control the timeout of the request, that is, set a time limit, and process it if no response is received within the specified time. So, can the expiration time of Ajax requests be customized? This article will introduce this problem in detail and provide specific code examples. Using jQuery's Ajax function
