项目前端部分小结
2016-01-28 15:22
369 查看
bootstrap提交表单框架,以及jq表单验证例子:
后台使用的是servlet:
注意问题:
1、前面的js的引用顺序如果反了会不执行。
2、使用标签显示数据的时候不能换行,不然会出现多余的空格。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Problem</title> <link rel="stylesheet" type="text/css" href="css/weixin.css"> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery-1.4.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> <script type="text/javascript" src="jquery.validate.messages_cn.js"></script> <script type="text/javascript" src="jqueryform.js"></script> <script type="text/javascript" src="bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready( function(){ $.post('/new/GetChangeServlet',{ openid:GetUrl() },function(jsonObject,status){ var json= jQuery.parseJSON(jsonObject); var openid=json["openid"]; var username=json["nickname"]; var email=json["email"]; var school=json["school"]; var college=json["college"]; var profession=json["profession"]; var grade=json["grade"]; var id=json["id"]; var idArr=id.split("%"); for(var j=1;j<idArr.length;j++){ $('#forminputitem').append("<tr>"+ "<td class='col-sm-5' style='height: 100px;'>"+"</td>" + "<td class='col-sm-7'><input style='font-size: 48px;height: 92px;float: right;' type='text' value='"+idArr[j]+"' name='arr' class='form-control'/ >"+"</td>" + "<td>" + "<button type='button' onclick='remove_line(this);' style='float: right;font-size: 44px;margin-top: 3px;width: 52px;' class='btn btn-primary'>"+"-"+"</button>" + "</td>" + "</tr>"); } $("#username").val(username); $("#email").val(email); $("#school").val(school); $("#college").val(college); $("#professional").val(profession); $("#grade").attr('value',grade); $("#usedID").val(idArr[0]); $("#submitbutton").click(function(){ $("#formV").validate( { rules:{ username:{required:true,rangelength:[3,10]}, email:{required:true,email:true}, school:{required:true}, college:{required:true}, professional:{required:true}, usedID:{required:true} }, messages:{ username: { required: "请填写用户名!", rangelength: "用户名必须在3-10个字符之间!" }, email:{ required: "请填写邮箱!" }, school:{ required: "请填写学校!" }, college:{ required: "请填写学院!" }, professional:{ required: "请填写专业!" }, usedID:{ required: "请填写ID!" } } } ); var url="?openid="+openid; $('#formV').attr('action','/new/GetSaveServlet'+ url); var options = { //type:'post', success: function (data) { //var jsondata= jQuery.parseJSON(data); if(data=="ok"){ alert("修改信息成功!"); }else if(data=="fail"){ alert("昵称已存在,请重新输入!"); } } }; $('#formV').ajaxForm(options); }) } ) } ); function GetRequest() { // var url = location.search; //获取url中"?"符后的字串 var url=window.location.href; if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("="); // alert(strs[1]); return strs[1]; } } function GetUrl() { var url = location.search; //获取url中"?"符后的字串 if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("="); // alert(strs[1]); return strs[1]; } } var i=0; $("#but1").live("click",function (){ //alert("测试"); //$("#forminputitem").after("<input class='form-control' type='text' value='请输入ID' />"); $('#forminputitem').append("<tr>"+ "<td class='col-sm-5' style='height: 100px;'>"+"</td>" + "<td class='col-sm-7'><input style='font-size: 48px;height: 92px;float: right;' type='text' name='arr' class='form-control'/ >"+"</td>" + "<td>" + "<button type='button' onclick='remove_line(this);' style='float: right;font-size: 44px;margin-top: 3px;width: 52px;' class='btn btn-primary'>"+"-"+"</button>" + "</td>" + "</tr>"); i=i+1; }); function remove_line(index) { i=i-1; //$(this)获取的是点击的对象,点击的对象是a标签,a标签的上一级的上一级是tr $(index).parent().parent().remove(); } </script> </head> <body> <div class="navbar navbar-inverse" role="navigation"> <div class="container"> </div> </div> <div class="container"> <h1 class="login-title">个人信息</h1> <form id="formV" role="form" class="form-horizontal col-sm-6 col-sm-offset-2" action="/new/GetSaveServlet" method="POST"> <div class="form-group" style="margin-left: -300px;margin-right: -200px;"> <label for="username" class="col-sm-5 control-label" style=" font-size: 60px;">昵称</label> <div class="col-sm-7" style="height: 100px;"> <input style="font-size: 48px;height: 92px;" class="form-control" id="username" name="username" type="text"/></div> </div> <div class="form-group" style="margin-left: -300px;margin-right: -200px;"> <label class="col-sm-5 control-label" for="email" style="font-size: 60px;">邮箱</label> <div class="col-sm-7" style="height: 100px;"> <input style="font-size: 30px;height: 92px;" class="form-control" name="email" id="email" type="text"/> <span></span> </div> </div> <div class="form-group" style="margin-left: -300px;margin-right: -200px;"> <label class="col-sm-5 control-label" for="school" style="font-size: 60px;">学校</label> <div class="col-sm-7" style="height: 100px;"> <input style="font-size: 48px;height: 92px;" class="form-control" name="school" id="school" type="text" /> <span></span> </div> </div> <div class="form-group" style="margin-left: -300px;margin-right: -200px;"> <label class="col-sm-5 control-label" for="college" style="font-size: 60px;">学院</label> <div class="col-sm-7" style="height: 100px;"> <input style="font-size: 48px;height: 92px;" class="form-control" name="college" id="college" type="text"/> <span></span> </div> </div> <div class="form-group" style="margin-left: -300px;margin-right: -200px;"> <label class="col-sm-5 control-label" for="professional" style="font-size: 60px;">专业</label> <div class="col-sm-7" style="height: 100px;"> <input style="font-size: 48px;height: 92px;" class="form-control" name="professional" id="professional" type="text"/> <span></span> </div> </div> <div class="form-group" style="margin-left: -300px;margin-right: -200px;"> <label class="col-sm-5 control-label" for="grade" style="font-size: 60px;">年级</label> <div class="col-sm-7" style="height: 100px;"> <select style="font-size: 48px;height: 92px;" class="form-control" name="grade" id="grade"> <option>2015</option> <option>2014</option> <option>2013</option> <option>2012</option> <option>2011</option> <option>2010</option> <option>2009</option> </select> </div> </div> <div class="form-group" style="margin-right: -241px;margin-left: -317px;"> <table class="tableone"> <tr> <td class="col-sm-5 control-label"> <label for="usedID" style="font-size: 60px;">usedID</label> </td> <td class="col-sm-7" style="height: 100px;"> <div > <input style="font-size: 48px;height: 92px;" class="form-control" name="usedID" id="usedID" type="text"/> </div> </td> <td> <button id="but1" type="button" style="float: right;font-size: 44px;margin-top: 3px;" class="btn btn-primary">+</button> </td> </tr> <tr> <td class="col-sm-5"></td> <td class="col-sm-7"><span></span></td> <td></td> </tr> </table> <table id="forminputitem"> </table> </div> <div class="form-group" style="margin-left: -300px;margin-right: -200px;"> <div class="col-sm-offset-5 col-sm-7"> <input style="font-size: 34px;height: 62px;" id="submitbutton" type="submit" class="btn btn-primary col-sm-8" value="提交"/> </div> </div> </form> </div> </body> </html>
后台使用的是servlet:
public class GetChangeServlet extends HttpServlet { private static final long serialVersionUID = 1L; private String nickname=new String(); private String email=new String(); private String school=new String(); private String college=new String(); private String profession=new String(); private String grade=new String(); private String id=new String(); protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String openid=(String) request.getParameter("openid"); Map<String, Object> map=UserDao.getSingleUserByOpenID(openid); System.out.println(map); nickname=map.get("nickname").toString(); email=map.get("email").toString(); school=map.get("school").toString(); college=map.get("college").toString(); profession=map.get("profession").toString(); grade=map.get("grade").toString(); id=map.get("id").toString(); // System.out.println("nickname"+nickname+id); JSONObject json = new JSONObject(); json.put("openid", openid); json.put("nickname", nickname); json.put("email", email); json.put("school", school); json.put("college", college); json.put("profession", profession); json.put("grade", grade); json.put("id", id);//这里需要分开处理。。。。 response.setContentType("text/html;charset=UTF-8"); response.getWriter().write(json.toString()); // System.out.println("json.toString()"); // String username1=(String) request.getParameter("username"); // String email1=(String) request.getParameter("email"); // String school1=(String) request.getParameter("school"); // String college1=(String) request.getParameter("college"); // String profesional1=(String) request.getParameter("professional"); // String grage1=(String) request.getParameter("grade"); // String usuid1=(String) request.getParameter("usedID"); // System.out.println(username1); // System.out.println(email1); // String openid=(String) request.getParameter("openid"); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } public String getNickname() { return nickname; } public void setNickname(String nickname) { this.nickname = nickname; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getSchool() { return school; } public void setSchool(String school) { this.school = school; } public String getCollege() { return college; } public void setCollege(String college) { this.college = college; } public String getProfession() { return profession; } public void setProfession(String profession) { this.profession = profession; } public String getGrade() { return grade; } public void setGrade(String grade) { this.grade = grade; } public String getId() { return id; } public void setId(String id) { this.id = id; } }
public class GetSaveServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out=response.getWriter(); String username=(String) request.getParameter("username"); String email=(String) request.getParameter("email"); String school=(String) request.getParameter("school"); String college=(String) request.getParameter("college"); String profesional=(String) request.getParameter("professional"); String grage=(String) request.getParameter("grade"); String usuid=(String) request.getParameter("usedID"); String openid=(String) request.getParameter("openid"); String[] id=request.getParameterValues("arr"); if (id!=null) for(int i=0;i<id.length;i++){ System.out.println(id[i]); } String usedid=new String(); usuid=usuid; if (id!=null) for (int i=0;i<id.length;i++) usuid=usuid+"%"+id[i]; String oldusername=UserDao.getSingleUsernickname(openid).get("nickname").toString(); if(username.equals(oldusername)){ UserDao.updateUserInfo(username,email,school,college,profesional,grage,usuid, openid); out.print("ok"); }else{ if(UserDao.isExistNickname(username)){ out.print("fail"); }else{ UserDao.updateUserInfo(username,email,school,college,profesional,grage,usuid, openid); out.print("ok"); } out.close(); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
注意问题:
1、前面的js的引用顺序如果反了会不执行。
2、使用标签显示数据的时候不能换行,不然会出现多余的空格。
相关文章推荐
- js 默认行为取消
- 理解javascript中的MVC模式
- css 属性通配符选择器
- geolocation h5
- javascript函数库
- CSS fliter
- codeforces 620D D. Professor GukiZ and Two Arrays
- Newtonsoft.Json高级用法之枚举中文转义
- 前端——px,em,rem区别
- HTML5:表格
- CSS3下的147个颜色名称及对应颜色值
- jQuery对象和DOM对象互转
- JQuery取消和注册对象Click事件同时防止多播委托
- JS乘法口诀表(一行代码)
- js023-离线应用与客户端存储
- css3伪元素
- js调绝对定位的top
- 用 JavaScript 操作字符串
- Doc13(样式浮动及文本框空就变色)
- Chorme Error 312 (net::ERR_UNSAFE_PORT) | Chorme 不信任端口