AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】


Posted in Javascript onNovember 02, 2016

本文实例讲述了AngularJS实现与Java Web服务器交互操作的方法。分享给大家供大家参考,具体如下:

AngularJS是Google工程师研发的产品,它的强大之处不是几句话就能描述的,只有真正使用过的人才能体会到,笔者准备在这篇文章中,以一个简单的登录校验的例子说明如何使用AngularJs和Web服务器进行交互。

准备工作

1.下载angular js库。

官网下载地址:https://angularjs.org/

或者点击此处本站下载

2.开发环境准备,由于是和Tomcat服务器进行交互,所以JDK什么的都是必不可少的。笔者机器上使用Eclipse Luna版、JDK7.0和Tomcat8.0。

浏览器最好选用Chrome或Firefox调试起来比较方便。

AngularJs与Java Web服务器交互案例

AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

这是笔者使用AngularJs和html5、css写好的一个前端页面,我们需要实现的是当点击提交案例后,?⑽谋居蛑械氖?萏峤坏椒?衿鞫私?行Q椋??衿鞫讼蚩突Ф朔祷叵嘤Φ拇?斫峁?4?肴缦拢?/p>

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>登录</title>
<script src="js/angular-1.3.0.14/angular.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body ng-app="myApp">
  <div>
    <ul id="loginForm" ng-controller="LoginForm">
      <li>用户名:<input type="text" name="uname" ng-model="uname" /></li>
      <li>密 码:<input type="password" name="pword" ng-model="pword" /></li>
      <li id="loginBtn"><input type="button" value="提交" ng-click="submit()"/> <input type="button" value="重置" ng-click="resetInfo()"/></li>
    </ul>
  </div>
<script>
angular.module("myApp", [])
  .controller("LoginForm", function($scope,$http) {
  $scope.resetInfo=function()
  {
    $scope.uname="";
    $scope.pword="";
  }
  $scope.submit=function()
  {
    var postData = "?uname="+$scope.uname+"&"+"pword="+$scope.pword;
    var url = "loginAction.do" + postData;
    $http.post(url).success(function(data)
    {
      alert(data);
    });
  }
});
</script>
</body>
</html>

AngularJs对服务器的请求都是通过Ajax来实现的,所有的操作都封装在$http中,通过$http.post()方法以uname和pword做为参数向服务器端发送请求,请求资源为loginAction.do,然后调用alert方法弹出服务器端返回的内容。

在服务器端,我们需要增加一个Servlet来处理客户端的请求,并根据请求内容向客户端返回不同的数据。

在web.xml配置servlet,内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <display-name>AngularJs</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <!-- 处理客户端请求Servlet -->
  <servlet>
    <servlet-name>LoginAction</servlet-name>
    <servlet-class>com.csii.action.login.LoginAction</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>LoginAction</servlet-name>
    <url-pattern>/loginAction.do</url-pattern>
  </servlet-mapping>
</web-app>

我们所有的业务逻辑都在LoginAction类中处理,LoginAction代码如下:

package com.csii.action.login;
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 LoginAction extends HttpServlet{
  private static final long serialVersionUID = 1L;
  private final String USERNAME = "Rongbo_J";
  private final String PASSWORD = "1234567";
  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {
    doPost(req, resp);
  }
  @Override
  protected void doPost(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {
    String uname = req.getParameter("uname");
    String pword = req.getParameter("pword");
    PrintWriter pw = resp.getWriter();
    if(USERNAME.equals(uname) && PASSWORD.equals(pword))
    {
      pw.write("username and password is right!");
    }else
    {
      pw.write("username or password is wrong!");
    }
  }
}

这里我们简单的模拟一下,用户名和密码信息并没有从数据库中取出。

String uname = req.getParameter("uname");
String pword = req.getParameter("pword");

我们从req对象中拿到客户端传过来的数据,和USERNAME 、PASSWORD 对比,如果相同则返回"username and password is right!",否则返回"username or password is wrong!"

然后我们回到登录界面,用户名和密码输入错误可以看到:

AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

正确输入Rongbo_J和1234567:

AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

完整demo实例代码点击此处本站下载

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 #Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 #Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 #Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 #Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 #Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 #Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 #Javascript
You might like
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
python实现门限回归方式
2020/02/29 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
python SOCKET编程基础入门
2021/02/27 Python
外贸学院会计专业应届生求职信
2013/11/14 职场文书
清洁工岗位职责
2014/01/29 职场文书
工作收入住址证明
2014/10/28 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL