ANGULARJS implementation and Java Web server interactive operation example "with demo source download" _angularjs

The example in this article describes the ANGULARJS approach to implementing interaction with a Java Web server. Share to everyone for your reference, specific as follows:

ANGULARJS is a product developed by Google Engineers, its strength is not a few words can be described, only the real use of the people can realize, the author is prepared in this article, with a simple login verification example demonstrates how to use Angularjs and Web server interaction.

Preparatory work

1. Download Angular JS library.

Website Download Address: https://angularjs.org/

Or click here to download the site .

2. The development environment is ready, because it is interacting with the Tomcat server, so the JDK is essential. The author uses Eclipse Luna, JDK7.0, and Tomcat8.0 on the machine.

Browsers are best to use Chrome or Firefox debugging is more convenient.

Angularjs and Java Web server interaction case

This is the author use Angularjs and HTML5, CSS write a good front-end page, we need to achieve is when the click Submit case, the text field data submitted to the server side to verify, server-side return to the client the corresponding processing results. The code is as follows:

<! DOCTYPE html>  

Angularjs requests to the server are implemented via AJAX, all operations are encapsulated in $http, and the $http.post () method is used to send requests to the server for uname and Pword as parameters. The request resource is loginaction.do, and then the Alert method pop-up server-side returned content is invoked.

On the server side, we need to add a servlet to process the client's request and return different data to the client based on the requested content.

The servlet is configured in Web.xml as follows:

<?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>
  <!--processing client requests 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>

All of our business logic is handled in the Loginaction class, and the Loginaction code is as follows:

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, ioexcept
  Ion {DoPost (req, resp); @Override protected void DoPost (HttpServletRequest req, HttpServletResponse resp) throws Servletexception, IOE
    xception {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!");

 }
  }
}

Here we simply simulate that the username and password information is not taken out of the database.

String uname = Req.getparameter ("uname");
String Pword = Req.getparameter ("Pword");

We get the data from the client from the Req object and compare it to username, PASSWORD, and if the same, return "username and PASSWORD is right!", otherwise return "username or PASSWORD is wrong!"

Then we go back to the login interface, username and password input error can be seen:

Enter Rongbo_j and 1234567 correctly:

Full Demo Instance code click here to download the site .

I hope this article will help you to Angularjs program design.