AngularJS的添加操作和列表操作

代码下载：https://files.cnblogs.com/files/xiandedanteng/agsAddList.rar

添加成员页面图示：

添加成员页面代码：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html ng-app="notesApp">
  <head>
    <base href="<%=basePath%>">

    <title>Add page</title>

    <style>
    .username.ng-valid{
        background-color:lightgreen;
    }
    .username.ng-invalid{
        background-color:pink;
    }
    .userage.ng-valid{
        background-color:lightgreen;
    }
    .userage.ng-invalid{
        background-color:pink;
    }
    .usermail.ng-valid{
        background-color:lightgreen;
    }
    .usermail.ng-invalid{
        background-color:pink;
    }
    .userdate.ng-valid{
        background-color:lightgreen;
    }
    .userdate.ng-invalid{
        background-color:pink;
    }
    .usersn.ng-valid{
        background-color:lightgreen;
    }
    .usersn.ng-invalid{
        background-color:pink;
    }
    .userurl.ng-valid{
        background-color:lightgreen;
    }
    .userurl.ng-invalid{
        background-color:pink;
    }
  </style>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script src="angular1.4.6.min.js"></script>
  </head>

  <body>
    <form ng-submit="ctrl.submit()" name="myForm" action="Add">
        <table>
            <tr>
                <td width="50px">姓名:</td>
                <td>
                    <input type="text" class="username" name="uname" ng-model="ctrl.user.name" required ng-minlength="4"/>
                </td>
                <td>
                    <span ng-show="myForm.uname.$error.required">This a required field</span>
                    <span ng-show="myForm.uname.$error.minlength">Minimum length required is 4</span>
                    <span ng-show="myForm.uname.$invalid">This field is invalid</span>
                </td>
            </tr>

            <tr>
                <td width="50px">年龄:</td>
                <td>
                    <input type="number" class="userage" name="uage" ng-model="ctrl.user.age" required  ng-minlength="2"/>
                </td>
                <td>
                    <span ng-show="myForm.uage.$error.required">This a required field</span>
                    <span ng-show="myForm.uage.$error.minlength">Minimum length required is 2</span>
                    <span ng-show="myForm.uage.$invalid">This field is invalid</span>
                </td>
            </tr>

            <tr>
                <td width="50px">邮件:</td>
                <td>
                    <input type="email" class="usermail" name="umail" ng-model="ctrl.user.mail" required  ng-minlength="3"/>
                </td>
                <td>
                    <span ng-show="myForm.umail.$error.required">This a required field</span>
                    <span ng-show="myForm.umail.$error.minlength">Minimum length required is 3</span>
                    <span ng-show="myForm.umail.$invalid">This field is invalid</span>
                </td>
            </tr>

            <tr>
                <td width="50px">入职日期:</td>
                <td>
                    <input type="date" class="userdate" name="udate" ng-model="ctrl.user.date" required  ng-minlength="8"/>
                </td>
                <td>
                    <span ng-show="myForm.udate.$error.required">This a required field</span>
                    <span ng-show="myForm.udate.$error.minlength">Minimum length required is 8</span>
                    <span ng-show="myForm.udate.$invalid">This field is invalid</span>
                </td>
            </tr>

            <tr>
                <td width="50px">SN:</td>
                <td>
                    <input type="text" class="usersn" name="usn" ng-model="ctrl.user.sn" ng-pattern="/^SN-\d{4}$/"/>
                </td>
                <td>
                    <span ng-show="myForm.udate.$invalid">This field is invalid</span>
                </td>
            </tr>

            <tr>
                <td width="50px">URL:</td>
                <td>
                    <input type="url" class="userurl" name="uurl" ng-model="ctrl.user.url" />
                </td>
                <td>
                    <span ng-show="myForm.uurl.$invalid">This field is invalid</span>
                </td>
            </tr>

            <tr>
                <td ></td>
                <td colspan="2"><input type="submit" value="Submit" ng-disabled="myForm.$invalid"/></td>
                <td>
            </tr>
        </table>
    </form>
  </body>
</html>

<script type="text/javascript" charset="UTF-8">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',['$http',function($http){

           var self=this;

           self.submit=function(){
            document.forms[0].submit();
       };
     }]);
//-->
</script>

处理上传数据的Servlet：

package com.test;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AddServlet extends HttpServlet {
    private static final long serialVersionUID = 56890894234786L;

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        request.setCharacterEncoding("UTF-8");

        // 以post方式提交的表单编码格式默认为ISO-8859-1的编码格式,可能为中文的话需要转码
        String name=new String(request.getParameter("uname").getBytes("ISO8859-1"),"UTF-8");

        String age=request.getParameter("uage");
        String mail=request.getParameter("umail");
        String udate=request.getParameter("udate");
        String usn=request.getParameter("usn");
        String uurl=request.getParameter("uurl");

        Container.add(new Member(name,age,mail,udate,usn,uurl));

        RequestDispatcher dispatcher = request.getRequestDispatcher("list.jsp");
        dispatcher.forward(request, response);
        return;
    }

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        doPost(request, response);
    }
}

列表页面图示：

列表页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html ng-app="notesApp">
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script src="angular1.4.6.min.js"></script>
  </head>

  <body>
    <table ng-controller="MainCtrl as ctrl" border="1px">
        <tr ng-repeat="member in ctrl.items">
            <td><span ng-bind='member.sn'/></td>
            <td><span ng-bind='member.name'/></td>
            <td><span ng-bind='member.age'/></td>
            <td><span ng-bind='member.date'/></td>
            <td><span ng-bind='member.mail'/></td>
            <td><span ng-bind='member.url'/></td>
        </tr>
    </table>
  </body>
</html>

<script type="text/javascript"  charset="UTF-8">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',['$http',function($http){

           var self=this;
           self.items=[];

        var url="/agsAddList/Members";
           $http.get(url).then(function(response){
               self.items=response.data;
           },function(errResponse){
               alert('error'+errResponse);
           });
     }]);
//-->
</script>

获得列表的Servlet：

package com.test;

import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class MembersServlet extends HttpServlet {
    private static final long serialVersionUID = 56890894234786L;

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8"); //   设置response的ContentType解决中文乱码

        PrintWriter out = response.getWriter();

        List<Member> ls=Container.getLs();

        JSONArray jArray=JSONArray.fromObject(ls);
        String json=jArray.toString();

        System.out.println("json="+json);
        out.print(json);
        out.flush();

        return;
    }

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        doPost(request, response);
    }
}

AngularJS的添加操作和列表操作的更多相关文章

python连接redis、redis字符串操作、hash操作、列表操作、其他通用操作、管道、django中使用redis
今日内容概要 python连接redis redis字符串操作 redis之hash操作 redis之列表操作 redis其他通用操作,管道 django中使用redis 内容详细 1.python ...
redis hash操作 list列表操作
HSET key 子key 子value 192.168.11.5:6379> HSET stu1 name 'zhangmingda'(integer) 1192.168.11.5:6379& ...
004-redis-命令-哈希操作，列表操作
Redis hash 命令下表列出了 redis hash 基本的相关命令: 序号命令及描述 1 HDEL key field1 [field2] 删除一个或多个哈希表字段 2 HEXISTS k ...
python基础操作_字符串操作_列表操作list
#字符串可以通过下表取值,如下程序 names='java python' print(names[0],names[5]) #使用for循环轮询所有name值 ''' for name in nam ...
python3_列表（修改，添加和删除元素操作）
前言:列表的定义:列表是由一系列按特定顺序排列的元素组成.即列表是一个有序集合. 1.修改列表元素由前言知列表是一个有序集合,因此在修改列表元素时我们需指定列表名和要修改的元素的索引,再指定该元素的 ...
react实例之todo,做一个实时响应的列表操作
react实例之todo, 做一个实时响应的列表操作在所有的mvc框架中,最常见的例子不是hello world,而是todo,由于reactjs的简单性,在不引用flux和redux的情况下,我们 ...
Python学习笔记-Day2-Python基础之列表操作
列表的常用操作包括但不限于以下操作: 列表的索引,切片,追加,删除,切片等这里将对列表的内置操作方法进行总结归纳,重点是以示例的方式进行展示. 使用type获取创建对象的类 type(list) 使 ...
TCL语言笔记：TCL中的列表操作
一.介绍列表则是具有特殊解释的字符串.Tcl 中的列表操作和其它 Tcl 命令一样具有相同的结构.列表可应用在诸如 foreach 这样的以列表为变元的循环命令中,也应于构建 eval 命令的延迟命 ...
Smack[3]用户列表，头像，组操作，用户操作
用户列表 Smack主要使用Roster进行列表管理的 connection.getRoster(); /** * 返回所有组信息 <RosterGroup> * * @return Li ...

随机推荐

UNet简单案例讲解
1.创建文件夹: 2.创建一个空物体,添加如下组件: Network Manager(网络管理组件): Network Manager HUD(提供一个UI): 3.创建如下模型,并设置为预制体: 给 ...
Log4j官方文档翻译(六、日志的级别)
org.apache.log4j.Level 类提供了下面几种日志级别,你也可以通过继承这些类,自定义级别 ALL 所有日志级别都包括 DEBUG 指定信息事件的粒度是DEBUG,在调试应用的时候会有 ...
Codeforces 1063D Candies for Children
题目大意给定整数 $n, k, l, r$,$1\le n, k \le 10^{11}$,$1\le l, r \le n$ . 令 $ m = r - l + 1$,若 $m \le 0$,$m ...
bzoj 2563 贪心思想
BZOJ2563阿狸和桃子的游戏 2563: 阿狸和桃子的游戏 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 952 Solved: 682[Su ...
C++ 静态成员的类内初始化
一般来说,关于C++类静态成员的初始化,并不会让人感到难以理解,但是提到C++ 静态成员的"类内初始化"那就容易迷糊了. 我们来看如下代码: //example.h #includ ...
Python之文件操作：文件的读写
一.open函数:对文件读写之前,需要先打开文件,获取文件句柄注意:open() file() 尽量使用open(),Python3以后不支持file()了 1.open(file_name[,ac ...
显示3行，还要省略号(这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器)
div{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:; -webkit- ...
[LeetCode] Best Time to Buy and Sell Stock II 贪心算法
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
vim 搜尋取代功能
VI 的搜尋取代語法格式大致如下 :[範圍]s/[比對字串]/[取代字串]/[g,c,i] 範圍部分: 範圍表示法為開頭 , 結束假如我要從第 1 行到第 150 行,可以這樣下: 1, 150 假 ...
PHPCMS V9 采集实例
采集目标: 列表: http://www.cnys.com/zixun/list_2_2.html

AngularJS的添加操作和列表操作

AngularJS的添加操作和列表操作的更多相关文章

随机推荐

热门专题