AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

AngularJS的添加操作和列表操作

2017-11-09 1530
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
Redis 开源版，标准版 2GB
推荐场景：
搭建游戏排行榜
云数据库 Tair（兼容Redis），内存型 2GB
推荐场景：
通过缓存加速数据库访问
简介：

代码下载：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);
    }
}
复制代码

 














本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/xiandedanteng/p/7422248.html，如需转载请自行联系原作者


文章标签：
云数据库 Tair（兼容 Redis）
Java
前端开发
数据格式
JSON
JavaScript
编解码
桃子红了呐
目录
相关文章
六月的雨在钉钉
|
API 对象存储
腾讯云对象存储cos获取图片像素信息
简述获取图片像素信息的几种方案
六月的雨在钉钉
1404 0
腾讯云对象存储cos获取图片像素信息
流水刀客6
|
6月前
|
网络协议 安全 应用服务中间件
云服务器怎么开启被关闭的端口？手把手教你开启端口
在使用云服务器时，若发现某些服务无法访问，可能是端口被关闭。本文介绍了端口关闭的原因、检查方法及开启步骤。原因包括初始设置限制、防火墙规则和外部网络策略；可通过netstat或ss命令检查端口状态，用ufw、iptables或firewalld调整防火墙规则。最后提供了解决常见问题的建议，确保端口正常开放并可供外网访问。
流水刀客6
1137 9
蚝油菜花
|
9月前
|
人工智能 编解码 算法
Doubao-1.5-pro：字节跳动最新豆包大模型，性能超越GPT-4o和Claude 3.5 Sonnet
豆包大模型1.5是字节跳动推出的最新大模型，采用大规模稀疏MoE架构，支持多模态输入输出，具备低时延语音对话能力，综合性能优于GPT-4o和Claude 3.5 Sonnet。
蚝油菜花
1578 2
Doubao-1.5-pro：字节跳动最新豆包大模型，性能超越GPT-4o和Claude 3.5 Sonnet
我是快乐的嘟嘟
|
11月前
|
前端开发 索引
Promise.all() 方法的参数可以是哪些数据类型？
`Promise.all()` 方法的参数具有很大的灵活性，可以适应多种不同的场景和需求，方便地处理多个异步操作的并发执行和结果汇总。
我是快乐的嘟嘟
261 58
小空门123-30335
|
11月前
|
存储 前端开发 数据可视化
集团数字化经营分析平台（帆软版）
集团数字化经营分析平台（帆软版）
小空门123-30335
272 3
-开发达人-
|
机器学习/深度学习 存储 监控
如何解决联邦学习中的通信开销问题？
本文是我们联邦学习系列研究文章中的一篇，重点聚焦的是联邦学习中的通信开销问题（Communication Cost）。
-开发达人-
2518 1
如何解决联邦学习中的通信开销问题？
ST小智
|
Linux
linux系统中使用QT实现CAN通信的方法
linux系统中使用QT实现CAN通信的方法
ST小智
1475 0
coder一枚
|
小程序
阿里云商标注册查询小程序上线及使用方法
阿里云商标查询小程序上线（来看看支持哪些功能），商标查询可以使用阿里云商标查询微信小程序，可以查询到商标信息和商标注册风险，输入商标名称、注册号、申请人即可查询，输入商标名称可以一键查询注册风险，阿里云百科分阿里云商标查询小程序入口及使用方法教程：
coder一枚
1171 0
阿里云商标注册查询小程序上线及使用方法
TiAmoZhang
|
存储 传感器
高效学习传感器｜浅谈CCD的工作原理以及常用波
高效学习传感器｜浅谈CCD的工作原理以及常用波
TiAmoZhang
1207 0
高效学习传感器｜浅谈CCD的工作原理以及常用波
码农工程师
|
编解码 光互联 虚拟化
虚幻引擎 5 来了！不止 Lumen、Nanite 新技术，性能及 UI 均迎来大升级
虚幻引擎 5 来了！不止 Lumen、Nanite 新技术，性能及 UI 均迎来大升级
码农工程师
542 0
虚幻引擎 5 来了！不止 Lumen、Nanite 新技术，性能及 UI 均迎来大升级