当前位置: 澳门新濠3559 > 编程 > 正文

可以使网页实现异步更新,就想到了用angularjs来

时间:2019-10-07 13:18来源:编程
目前在做一个javaweb页面,没有使用到框架的分页,所以需要自己实现分页,就想到了用angularjs来实现分页,数据通过ajax从后台获取。 百度了一下,看到一个比较漂亮的插件,就直接用

目前在做一个java web页面,没有使用到框架的分页,所以需要自己实现分页,就想到了用angularjs来实现分页,数据通过ajax从后台获取。

百度了一下,看到一个比较漂亮的插件,就直接用该插件,并修改了部分细节,使得适合我的项目,该插件地址是:(

angularjs bootstrap实现自定义分页的实例代码,angularjsbootstrap

目前在做一个java web页面,没有使用到框架的分页,所以需要自己实现分页,就想到了用angularjs来实现分页,数据通过ajax从后台获取。

插件

百度了一下,看到一个比较漂亮的插件,就直接用该插件,并修改了部分细节,使得适合我的项目,该插件地址是:(

效果图

图片 1

使用方法

1、在网页的头部引入angularjs、bootstarp以及该插件,该分页插件主要是ng-pagination.css以及ng-pagination.js

<link rel="stylesheet" href="/nutz-test/static/bootstrap/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="/nutz-test/static/angular/ng-pagination.css" rel="external nofollow" >
<script src="/nutz-test/static/jquery/jquery.min.js"></script>
<script src="/nutz-test/static/angular/angular.min.js"></script>
<script src="/nutz-test/static/angular/ng-pagination.js"></script>
<script src="/nutz-test/static/bootstrap/bootstrap.min.js"></script>

2、表格代码以及分页代码

<div id="app" ng-app="myApp" ng-controller="myCtrl">
 <div style="overflow: auto; width: 100%;">
   <table class="table table-hover table-striped table-bordered" id="j-table">
     <thead>
       <tr>
         <th>姓名</th>
         <th>年龄</th>
         <th>电话</th>
         <th>职位</th>
       </tr>    
     </thead>
     <tbody>
       <tr ng-repeat="item in list">
         <th title="{{item.name}}">{{item.name}}</th>
         <th title="{{item.age}}">{{item.age}}</th>
         <th title="{{item.tel}}">{{item.tel}}</th>
         <th title="{{item.position}}">{{item.position}}</th>
       </tr>
     </tbody>
   </table>
 </div>
<!-- 这里引用插件的分页-->
 <div class="pager">
  <pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首页" next-text="下一页" prev-text="上一页" last-text="尾页" show-goto="true" goto-text="跳转到"></pager>
 </div>
</div>

3、javascript代码部分

分页的重点是从后台获取数据,只需把pageSize(每页显示数目),以及pageIndex(当前页数)通过post请求传到后台即可。后台返回实际的数据以及pageCount(页数)给前台即可。其中,onPageChange()方法是点击页码后去通过ajax从后台获取数据,myinit()方法是第一次请求该页面时进行初始化。$scope.currentPage就是页数,例如当你点击下一页的时候,它就会加一,然后就可以通过post请求去后台取下一页的数据了。

<script type="text/javascript">
var app = angular.module('myApp', ['ng-pagination']);
app.controller('myCtrl', ['$scope', function ($scope) {
  $scope.onPageChange = function() {
     // ajax request to load data
     console.log($scope.currentPage);
     //这里是post请求去后台取数据
     $.ajax({
       type:"post",
       url:'/nutz-test/show/pagination',
       data:{
         "pageSize":5,
         "pageIndex":$scope.currentPage
       },
       dataType:"json",
       success:function(data){
         $scope.$apply(function () {
           $scope.list = data.list;
           $scope.pageCount = data.pageCount;
          });

       }
     })
    };
    //初始化,设置为第一页,每页显示5条
    $scope.myinit = function(){
      $.ajax({
         type:"post",
         url:'/nutz-test/show/pagination',
         data:{
           "pageSize":5,
           "pageIndex":1
         },
         dataType:"json",
         success:function(data){
           $scope.$apply(function () {
             $scope.list = data.list;
             $scope.pageCount = data.pageCount;
            });

         }
       })
    };
    $scope.myinit();
}]);
</script>

注意事项

1、该插件在只有一页的情况会出现分页插件加载不出来的情况,因此需要修改ng-pagination.js的代码。

打开ng-pagination.js,定位到最后的template,修改pageCount>=1,如下图所示。

图片 2

2、在ie浏览器和360浏览器不支持跳转功能,原因是ie和360没有number.isNaN()方法,因此需要修改分页插件的该方法,改为isNaN()。

定位到ng-pagination.js的Number.isNaN()方法,把该方法修改为下图所示。

图片 3

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

目前在做一个java web页面,没有使用到框架的分页,所以需要自己实现分页,就想...

目前在做一个java web页面,没有使用到框架的分页,所以需要自己实现分页,就想到了用angularjs来实现分页,数据通过ajax从后台获取。

图片 41478763627140018779.jpg

图片 5Paste_Image.png

插件

ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

  1. 在网页的头部引入angularjs、bootstarp以及该插件,该分页插件主要是ng-pagination.css以及ng-pagination.js

百度了一下,看到一个比较漂亮的插件,就直接用该插件,并修改了部分细节,使得适合我的项目,该插件地址是:()

对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输。

效果图

如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧。

<link rel="stylesheet" href="/nutz-test/static/bootstrap/bootstrap.min.css"><link rel="stylesheet" href="/nutz-test/static/angular/ng-pagination.css"><script src="/nutz-test/static/jquery/jquery.min.js"></script><script src="/nutz-test/static/angular/angular.min.js"></script><script src="/nutz-test/static/angular/ng-pagination.js"></script><script src="/nutz-test/static/bootstrap/bootstrap.min.js"></script>

图片 6

打开eclipse,新建一个web项目。

  1. 表格代码以及分页代码

使用方法

如果对JavaWeb项目还不太清楚的,可以去参考我之前的文章。我

1、在网页的头部引入angularjs、bootstarp以及该插件,该分页插件主要是ng-pagination.css以及ng-pagination.js

目录结构:

<div ng-app="myApp" ng-controller="myCtrl"> <div style="overflow: auto; width: 100%;"> <table > <thead> <tr> <th>姓名</th> <th>年龄</th> <th>电话</th> <th>职位</th> </tr> </thead> <tbody> <tr ng-repeat="item in list"> <th title="{{item.name}}">{{item.name}}</th> <th title="{{item.age}}">{{item.age}}</th> <th title="{{item.tel}}">{{item.tel}}</th> <th title="{{item.position}}">{{item.position}}</th> </tr> </tbody> </table> </div><!-- 这里引用插件的分页--> <div > <pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首页" next-text="下一页" prev-text="上一页" last-text="尾页" show-goto="true" goto-text="跳转到"></pager> </div></div>
<link rel="stylesheet" href="/nutz-test/static/bootstrap/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="/nutz-test/static/angular/ng-pagination.css" rel="external nofollow" >
<script src="/nutz-test/static/jquery/jquery.min.js"></script>
<script src="/nutz-test/static/angular/angular.min.js"></script>
<script src="/nutz-test/static/angular/ng-pagination.js"></script>
<script src="/nutz-test/static/bootstrap/bootstrap.min.js"></script>

图片 71478763938218083624.png

  1. javascript代码部分

2、表格代码以及分页代码

<?xml version="1.0" encoding="UTF-8"?><web-app></web-app>

分页的重点是从后台获取数据,只需把pageSize,以及pageIndex通过post请求传到后台即可。后台返回实际的数据以及pageCount给前台即可。其中,onPageChange()方法是点击页码后去通过ajax从后台获取数据,myinit()方法是第一次请求该页面时进行初始化。$scope.currentPage就是页数,例如当你点击下一页的时候,它就会加一,然后就可以通过post请求去后台取下一页的数据了。

<div id="app" ng-app="myApp" ng-controller="myCtrl">
 <div style="overflow: auto; width: 100%;">
   <table class="table table-hover table-striped table-bordered" id="j-table">
     <thead>
       <tr>
         <th>姓名</th>
         <th>年龄</th>
         <th>电话</th>
         <th>职位</th>
       </tr>    
     </thead>
     <tbody>
       <tr ng-repeat="item in list">
         <th title="{{item.name}}">{{item.name}}</th>
         <th title="{{item.age}}">{{item.age}}</th>
         <th title="{{item.tel}}">{{item.tel}}</th>
         <th title="{{item.position}}">{{item.position}}</th>
       </tr>
     </tbody>
   </table>
 </div>
<!-- 这里引用插件的分页-->
 <div class="pager">
  <pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首页" next-text="下一页" prev-text="上一页" last-text="尾页" show-goto="true" goto-text="跳转到"></pager>
 </div>
</div>

这样就好了,web项目搭建完毕。

<script type="text/javascript">var app = angular.module('myApp', ['ng-pagination']);app.controller('myCtrl', ['$scope', function  { $scope.onPageChange = function() { // ajax request to load data console.log($scope.currentPage); //这里是post请求去后台取数据 $.ajax({ type:"post", url:'/nutz-test/show/pagination', data:{ "pageSize":5, "pageIndex":$scope.currentPage }, dataType:"json", success:function{ $scope.$apply(function () { $scope.list = data.list; $scope.pageCount = data.pageCount; }); } }) }; //初始化,设置为第一页,每页显示5条 $scope.myinit = function(){ $.ajax({ type:"post", url:'/nutz-test/show/pagination', data:{ "pageSize":5, "pageIndex":1 }, dataType:"json", success:function{ $scope.$apply(function () { $scope.list = data.list; $scope.pageCount = data.pageCount; }); } }) }; $scope.myinit;</script>

3、javascript代码部分

暂时不要往下写,先确保我们到目前为止的工作是没问题的。

  1. 该插件在只有一页的情况会出现分页插件加载不出来的情况,因此需要修改ng-pagination.js的代码。

分页的重点是从后台获取数据,只需把pageSize(每页显示数目),以及pageIndex(当前页数)通过post请求传到后台即可。后台返回实际的数据以及pageCount(页数)给前台即可。其中,onPageChange()方法是点击页码后去通过ajax从后台获取数据,myinit()方法是第一次请求该页面时进行初始化。$scope.currentPage就是页数,例如当你点击下一页的时候,它就会加一,然后就可以通过post请求去后台取下一页的数据了。

验证方法就是在WebContent目录下,新建一个空的jsp页面,里面随便写的什么。

<script type="text/javascript">
var app = angular.module('myApp', ['ng-pagination']);
app.controller('myCtrl', ['$scope', function ($scope) {
  $scope.onPageChange = function() {
     // ajax request to load data
     console.log($scope.currentPage);
     //这里是post请求去后台取数据
     $.ajax({
       type:"post",
       url:'/nutz-test/show/pagination',
       data:{
         "pageSize":5,
         "pageIndex":$scope.currentPage
       },
       dataType:"json",
       success:function(data){
         $scope.$apply(function () {
           $scope.list = data.list;
           $scope.pageCount = data.pageCount;
          });

       }
     })
    };
    //初始化,设置为第一页,每页显示5条
    $scope.myinit = function(){
      $.ajax({
         type:"post",
         url:'/nutz-test/show/pagination',
         data:{
           "pageSize":5,
           "pageIndex":1
         },
         dataType:"json",
         success:function(data){
           $scope.$apply(function () {
             $scope.list = data.list;
             $scope.pageCount = data.pageCount;
            });

         }
       })
    };
    $scope.myinit();
}]);
</script>

图片 81478764279468099277.png

打开ng-pagination.js,定位到最后的template,修改pageCount>=1,如下图所示。

注意事项

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body style="padding:100px"><h1>Hello World</h1></body></html>

图片 9Paste_Image.png

1、该插件在只有一页的情况会出现分页插件加载不出来的情况,因此需要修改ng-pagination.js的代码。

启动tomcat,把这个项目跑起来。

  1. 在ie浏览器和360浏览器不支持跳转功能,原因是ie和360没有number.isNaN()方法,因此需要修改分页插件的该方法,改为isNaN()。

打开ng-pagination.js,定位到最后的template,修改pageCount>=1,如下图所示。

图片 101478764352890058372.png

图片 11

没报错。

定位到ng-pagination.js的Number.isNaN()方法,把该方法修改为下图所示。

2、在ie浏览器和360浏览器不支持跳转功能,原因是ie和360没有number.isNaN()方法,因此需要修改分页插件的该方法,改为isNaN()。

打开浏览器,输入访问地址,我这里的tomcat端口号是80 ,默认可以不写。

图片 12Paste_Image.png

定位到ng-pagination.js的Number.isNaN()方法,把该方法修改为下图所示。

图片 13

图片 141478764554890071423.png

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

来了,没问题。

您可能感兴趣的文章:

  • Spring Boot AngularJS BootStrap实现进度条示例代码
  • AngularJS实现tab选项卡的方法详解
  • Angular2 自定义validators的实现方法
  • AngularJS实现单一页面内设置跳转路由的方法
  • angular过滤器实现排序功能
  • AngularJS实现元素显示和隐藏的几个案例
  • AngularJS实现表单验证
  • 在AngularJS应用中实现一些动画效果的代码
  • AngularJS实现全选反选功能
  • 用AngularJS的指令实现tabs切换效果
  • 实例详解AngularJS实现无限级联动菜单
  • AngularJS实现进度条功能示例

好的,这说明我们的web项目搭建没有问题。

个人感悟,精粹整理

web环境已经搭好,接下来,让我们来编写一个简单的Servlet程序,tomcat是一个服务器,现在它里面有一个名字叫做ajax的web项目,那么这些Servlet就好比是web项目里面的一个个小功能。

你的电脑里面有QQ,Word,杀毒软件等程序。一个web项目,也就是一个应用程序。本质上和你电脑上的QQ概念是一样一样的。

你打开QQ,可以聊天,语音,视频。这些小功能,类比到JavaWeb项目,就是一个个Servlet。

很多人都知道框架,比如大名鼎鼎的SpringMVC,里面有一个个的Controller,其实这些Controller到底是什么玩意,不要怕,他们其实就是对Servlet做了一个封装,本质上还是一样一样的。

我们写一个Servlet,都需要去web.xml里面注册一下,否则就用不了。你安装一个QQ,注册表里面是不是肯定也需要注册一下啊,这不还是一样一样的吗?

好了,闲话不多说。我们来写一个小功能,也就是一个Servlet。

图片 151478765437734080634.png

继承HttpServlet,同时改写doGet方法

import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class MyServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println; }}

里面我们先什么也不写。

接下来,我们要在web.xml里面把这个Servlet注册一下。

<?xml version="1.0" encoding="UTF-8"?><web-app> <servlet> <!-- 这里是servlet的名字 --> <servlet-name>MyServlet</servlet-name> <servlet-class>MyServlet</servlet-class> <!-- 这里写servlet类在的包路径 --> </servlet> <servlet-mapping> <!-- 这里是地址映射 --> <servlet-name>MyServlet</servlet-name> <!-- 这里写servlet映射地址 --> <url-pattern>/MyServlet</url-pattern> </servlet-mapping></web-app>

OK,Servlet注册完毕,我们先来访问一下这个功能。

重启tomcat。

访问:

图片 16Paste_Image.png

服务器小程序已经差不多了,现在我们为了和服务器进行交互,就需要编写前台页面。这个页面也就是给用户看的。换言之,用户只能通过前台页面来访问我们的Servlet。

我们来写一个小案例,在页面上发送一句话到服务器,然后服务器给出一个回应就行了。

就是这么一个简单的案例,主要用来熟悉一下流程。

为了简单起见,我就不自己调css样式了,直接用bootstrap吧。

引入bootstrap的核心css文件。

图片 171478768261609012666.png

然后,修改index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css"><title>Insert title here</title><style type="text/css"> .container { margin-top:100px; }</style><script> window.onload = function(){ var btn = document.getElementById; btn.onclick = function(){ alert(); } }; </script></head><body> <div > <div > <div > <div > <input type="text" >  <button type="button">提交</button>  </div> </div> </div> </div></body></html>

页面效果:

图片 18Paste_Image.png

1.4 基于get方式的数据请求

当我们点击提交按钮,就alert()一下,如果成功的话,那么说明点击事件没有问题。然后,继续往下写代码。

如果是以往,我们都是通过form表单来进行提交的,可是这样的话,就会有一个问题,就是页面会刷新,而且代码也相对比较难懂。

自从ajax出来了之后,这种情况得到了巨大的改善,局部刷新技术在当时来看,还是非常不错的。

我先把实现代码给出:

btn.onclick = function(){ var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("get","MyServlet?message=" document.getElementsByTagName[0].value,true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ alert(xhr.responseText); } };}

同时修改一下MyServlet

@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String msg = req.getParameter("message"); System.out.println;}

重启 tomcat ,访问index.jsp页面。

现在的浏览器一般都有调试功能,按一下F12,调试界面就出来了。然后,找到一个network,以谷歌浏览器为例

图片 19Paste_Image.png

network视图会把所有的数据交互显示出来,包括引入的 js , css文件,还有各种请求和回应,都会在这里显示出来。

比如,现在我刷新一下页面

图片 201478829216046091217.png

我这么一刷新,首先服务器接收到的是这么一个 URL:

这就是一个请求,服务器收到这个请求后,返回给我 index.jsp页面和bootstrap.min.css这个文件。

因为我在index.jsp的确引入过bootstrap.min.css,所以他也就一起加载进来了。

图片 211478829432484070081.png

现在,我输入一句话,点击提交,看看会发生什么?

图片 221478829904984033432.png

我们把input框里面的内容提交到服务器程序 MyServlet

控制台已经接受到了,这里比较幸运,没有遇到中文乱码的问题,那么先不管乱码了。

图片 231478830083421039505.png

因为MyServlet中没有返回什么东西,所以alert出来的是空。

好的,那我们给浏览器也返回一句话吧。

@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String msg = req.getParameter("message"); System.out.println; resp.setContentType("text/html;charset=utf-8"); PrintWriter out=resp.getWriter(); out.println("你好,这是服务器返回的信息!"); out.flush(); out.close(); }

再次点击提交按钮

图片 241478830488328084062.png

OK了。

​接下来,看一下请求的具体信息

图片 251478830755296049934.png

在比对一下js代码,就一目了然了。

btn.onclick = function(){ var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("get","MyServlet?message=" document.getElementsByTagName[0].value,true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ alert(xhr.responseText); } };}

readyState:

0: 请求未初始化1: 服务器连接已建立,还没发送2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪当 readyState 等于 4 且状态为 200 时,表示响应已就绪.

请求方式是get,并且只有当返回的状态码为200的时候,才会打印出responseText,这个就是对应的

​out.println("你好,这是服务器返回的信息!");

这句话。

get方法会在URL地址栏里显示你提交所带的值,post方法不会。所以,相对来说,post方法比较安全。

post方法在流程上和get方式差不多,我就直接上代码了:

window.onload = function(){ var btn = document.getElementById; btn.onclick = function(){ var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("post","MyServlet",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); var postData = {message : document.getElementsByTagName[0].value}; var postDataStr = (function{ // 转成post需要的字符串. var str = ""; for(var prop in obj){ str  = prop   "="   obj[prop]   "&" } return str; }); alert(postDataStr); xhr.send(postDataStr); xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ alert(xhr.responseText); } }; }};

MyServlet.java

import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class MyServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding; String msg = req.getParameter("message"); System.out.println; resp.setContentType("text/html;charset=utf-8"); PrintWriter out=resp.getWriter(); out.println("你好,这是服务器返回的信息!"); out.flush(); out.close(); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } }

编辑:编程 本文来源:可以使网页实现异步更新,就想到了用angularjs来

关键词: 澳门新濠3559