AngularJs與Java Web服務器交互

時間 2019-11-08

標籤 angularjs java web 服務器交互欄目 AngularJS 简体版

原文原文鏈接

AngularJs是Google工程師研發的產品，它的強大之處不是幾句話就能描述的，只有真正使用過的人才能體會到，筆者準備在這篇文章中，以一個簡單的登陸校驗的例子說明如何使用AngularJs和Web服務器進行交互。javascript

準備工做

1.下載angular js庫。
官網下載地址：https://angularjs.org/
CSDN地址：http://download.csdn.net/detail/rongbo_j/8612479css

筆者使用的是電信寬帶，不知道是否是運營商的問題，有時候換了網絡，官網常常打不開，不過也不用擔憂，筆者在CSDN上上傳了一份(^_^)。html

2.開發環境準備，因爲是和Tomcat服務器進行交互，因此JDK什麼的都是必不可少的。筆者機器上使用Eclipse Luna版、JDK7.0和Tomcat8.0。前端

瀏覽器最好選用Chrome或Firefox調試起來比較方便。html5

AngularJs與Java Web服務器交互案例

這是筆者使用AngularJs和html五、css寫好的一個前端頁面，咱們須要實現的是當點擊提交案例後，將文本域中的數據提交到服務器端進行校驗，服務器端向客戶端返回相應的處理結果。代碼以下：java

<!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方法彈出服務器端返回的內容。angularjs

在服務器端，咱們須要增長一個Servlet來處理客戶端的請求，並根據請求內容向客戶端返回不一樣的數據。
在web.xml配置servlet，內容以下：web

<?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代碼以下：chrome

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：

源碼：http://download.csdn.net/detail/rongbo_j/8617845

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。