简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Ajax-Anfrage + Vue.js-Rendering + Seitenladen

Ajax-Anfrage + Vue.js-Rendering + Seitenladen

亚连
亚连Original
2018-06-06 11:06:272061Durchsuche

Im Folgenden werde ich Ihnen ein Beispiel für Ajax-Anfrage + Vue.js-Rendering + Seitenladen vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

1. js importieren

<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-Codeblock

<script src="<c:url value="/resources/mui/js/mui.min.js"/>"></script>
<script>
 var vm = new Vue({
  el: &#39;.main&#39;,
  data: function () {
   return {
    list: []
   }
  },
  methods: {
   skipDetail: function (id) {
    window.location.href = &#39;/mobile/admin/orderBase/getOrderBaseEditPage.action?orderBaseId=&#39;+id;
   },
   orderDetail:function (id) {
    window.location.href=&#39;/mobile/admin/orderDetails/getOrderDetailsListPage.action?orderBaseId=&#39;+id;
   }
  }
 });
 var indexs=1;
 leavePage();
 function leavePage(srh) {
  if(srh==1){
   indexs=1;
   $("#msgUl").html("");
  }
  $.ajax({
   url:&#39;<c:url value="/mobile/admin/orderBase/getOrderBaseListJSON.action" />&#39;,
   async:false,
   data:{
    customerAddress:$(".mui-input-clear").val(),
    page:indexs,
    rows:9
   },
   dataType:&#39;json&#39;,//服务器返回json格式数据
   contentType: "application/x-www-form-urlencoded; charset=utf-8",
   type:&#39;post&#39;,//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(&#39;浏览器的高度：&#39;+$(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>

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So verwenden Sie eine Vorlage in der Vue2-Vorlage

So erstellen Sie Komponenten in Vue

So verwenden Sie Eslint in Vue-cli, um eine automatische Formatierung zu erreichen

Das obige ist der detaillierte Inhalt vonAjax-Anfrage + Vue.js-Rendering + Seitenladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So lösen Sie das Problem, dass die Seite blinkt, wenn Vue.js Daten anzeigtNächster Artikel：So lösen Sie das Problem, dass die Seite blinkt, wenn Vue.js Daten anzeigt

In Verbindung stehende Artikel

Mehr sehen