本文執行個體講述了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和html5、css寫好的一個前端頁面，我們需要實現的是當點擊提交案例後，將文本域中的資料提交到伺服器端進行校正，伺服器端向用戶端返回相應的處理結果。代碼如下：
<!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!"
然後我們回到登入介面，使用者名稱和密碼輸入錯誤可以看到：
正確輸入Rongbo_J和1234567：
完整demo執行個體代碼點擊此處本站下載。
希望本文所述對大家AngularJS程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
