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

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

准备工作

1.下载角度射流研究…库。

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

或者点击此处本站下载。

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

浏览器最好选用铬或火狐浏览器调试起来比较方便。

AngularJs与Java Web服务器交互案例

这是笔者使用AngularJs和html5、css写好的一个前端页面，我们需要实现的是当点击提交案例后，將文本域中的数据提交到服务器端进行校验，服务器端向客户端返回相应的处理结果。代码如下：

！DOCTYPE html html lang=' en ' hearta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1'title登录/title脚本src=' http : js/angular-1。3 .0 .14/棱角分明。js '/脚本链接rel='样式表type=' text/CSS ' href=' CSS/index。CSS/head body ng-app=' Myapp ' div ul id=' LogInform ' ng-controller=' LogInform ' Li用户名：输入类型=' text ' name=' uname ' ng-model=' uname '/Li Li密码：输入类型=' password ' name=' pword ' ng-model=' pword '/Li Li id=' login TN '输入类型='按钮'值='提交ng-click=' submit()'/input type=' button ' value='重置ng-click=' resetInfo()'//Li/ul/divscriptangular。模块(' myApp '，[]).控制器(“登录信息”，函数($scope，$ http){ $ scope。resetinfo=function(){ $ scope。uname=$ scope.pword=} $ scope。submit=function(){ var PostDATa='？uname=' $ scope。uname ' ' ' pword=' $ scope。pwordvar URL=' loginaction。do ' PostDATa$http.post(url).成功（函数（数据){ alert(数据)};});}});/script/body/htmlAngularJs对服务器的请求都是通过埃阿斯来实现的，所有的操作都封装在$http中，通过$http.post()方法以uname和pword做为参数向服务器端发送请求，请求资源为loginAction.do，然后调用警报方法弹出服务器端返回的内容。

在服务器端，我们需要增加一个小型应用程序来处理客户端的请求，并根据请求内容向客户端返回不同的数据。

在web.xml配置servlet，内容如下：

？可扩展标记语言版本='1.0 '编码='UTF-8 '？web-app ID=' WebApp _ ID '版本=' 2.4 ' xmlns=' http://Java。星期日com/XML/ns/J2EE ' xmlns : xsi=' http://www .w3。org/2001/XMLSchema-instance ' xsi 3360 schema location=' http://Java。星期日com/XML/ns/J2EE http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd'显示-名称aglerjs/显示-名称-欢迎-文件-列表welcome-fileindex.html/welcome-file/welcome-file-list!-处理客户端请求servlet-servlet servlet-name logination/servlet-name servlet-class com。csii。行动。登录。logination/servlet-class/servlet servlet-mapping servlet-name logination/servlet-name URL-pattern/logination。do/URL-模式/servlet-映射/web-应用我们所有的业务逻辑都在登录类中处理，登录代码如下：

打包。csii。行动。登录；导入Java。io。ioexception导入Java。io。版画作家；导入javax。servlet。servletexception导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse公共类登录扩展了HttpServlet {私有静态最终长串行版本id=1L；私有最终字符串用户名='荣博_ J '私有最终字符串PASSWORD=' 1234567 @ Override protected void doGet(Httpservletrequest req，HttpServletResponse resp)引发ServletException，IOException { doPost(req，resp)；} @ Override protected void doPost(httpersvletrequest req，HttpServletResponse resp)引发ServletException，IOException { String uname=req。get parameter(' uname ')；字符串pword=req。getParameter(' pword ')；PrintWriter pw=resp。getwriter()；if(USERNAME。等于(uname)PASSWORD。equals(pword)){ pw。写入(' USERNAME和密码是对的!');}else { pw.write('用户名或密码错误!');} }}这里我们简单的模拟一下，用户名和密码信息并没有从数据库中取出。

字符串uname=req。getParameter(' uname ')；字符串pword=req。getParameter(' pword ')；我们从请求对象中拿到客户端传过来的数据，和用户名、密码对比，如果相同则返回用户名和密码正确！否则返回用户名或密码错误!'

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

正确输入荣博_J和1234567:

完整演示实例代码点击此处本站下载。

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