bootstrap提交表单框架，以及jq表单验证例子：
<%@ 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、使用标签显示数据的时候不能换行，不然会出现多余的空格。
1010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
