Example of ajax request + vue. js rendering + page loading, ajaxvue. js
1. Import js
<Script type = "text/javascript" src = "<c: url value ="/resources/lib/jquery/jquery-1.11.0.min.js "/>"> </script> <! --Standard mui.css --> <link href = "<c: url value = "rel =" external nofollow "rel =" external nofollow "/resources/mui/css/mui.min.css"/> "rel =" stylesheet "> <! -- App-defined 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. js "/>"> </script>
2. body subject
<Body> <div class = "main">
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', // The server returns the json format data contentType: "application/x-www-form-urlencoded; charset = UTF-8 ", type: 'Post', // HTTP request type 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; // the length from the bottom boundary/unit: px var elemt = 500; // insert element height/unit: px var maxnum = 20; // set the maximum number of times of loading var num = 1; var totalheight = 0; var main = $ (". mui-content "); // subject element $ (window ). scroll (function () {var srollPos = $ (Window ). scrollTop (); // The distance from the scroll bar to the top (the page exceeds the window height)/* console. log ("vertical height from the scroll bar to the top:" + $ (document ). scrollTop (); console. log ("document height of the page:" + $ (document ). height (); console. log ('browser Height: '+ $ (window ). height (); */totalheight = parseFloat ($ (window ). height () + parseFloat (srollPos); if ($ (document ). height ()-range) <= totalheight & num! = Maxnum) {console. log (indexs);/* indexs + = 1; */leavePage () ;}}) ;}; // fuzzy search for addresses $ ("# searchInput "). change (function () {/* alert ($ (". mui-input-clear "). val (); */leavePage (1) ;})/* function submitSearch () {leavePage (1) ;}*/mui. init ({swipeBack: true // enable the right-hop function}); </script>
The above example of ajax request + vue. js rendering + page loading is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support for more.