javaWEB基础项目第一天中遇到的问题及总结
项目第一天总结
背景：已经学习87天了（2018.6.13-2018.9.8）这是web阶段学完后，较之前比较大的项目，为期4天课程（不含自习）；
1.表单提交
定义提交表单中，有多个异步请求，各个异步请求结果判断，要在最上面定义一个全局的 flag = true ，异步请求中有任意不符合要求的，flag = false，提交表单的时 if ( flag ) 为true即可提交表单
//按钮为buttom,绑定click点击事件
$("#button_submit").click(function () {
if (flagg) {
//提交服务器并，添加用户
//buttom没有提交功能，智能获取表单ID ，然后才能提交。
$.post("AddUserServlet", $("#registerForm").serialize(), function (data) {
if (data.Exist) {
$("#errorMsg").html("请稍等...");
$("#errorMsg").css("color", "greed");
location.href = "register_ok.html";
} else {
$("#errorMsg").html("2.请检查输入信息");
$("#errorMsg").html(data1.errorMsg);
$("#errorMsg").css("color", "red");
$("#checkCode").click();
}
}, "json");
} else {
$("#errorMsg").html("1.请检查输入信息");
$("#errorMsg").css("color", "red");
$("#checkCode").click();
}
});2.关于this的用法 ，谁调用this就是谁。
这里主要强调，this的调用 ，到底谁是他爸爸！ 例如：
//检查姓名是否已占用
function checkName() {
// 清空提示信息
$("#errorMsg").html("");
var name = $(--this--).val();
var reg_name = /^\w{2,18}$/;
var flag = reg_name.test(name);
if (flag) {
$("#name").css("border", "");
} else {
$("#name").css("border", "1px solid red");
flagg = false;
}
}
$(function () {
//正常调用this是调用者 $("#username")
$("#username").blur(checkUsername);
//非想象中调用
$("#button_submit").click(function () {
//下面方法里含有this,被$("#button_submit")调用后，这个this就变成了$("#button_submit")
checkName()
}3.html转跳问题
异步请求中servler里不能定义重定向，只能html自身转跳方法名为：
//例如转跳到注册成功页面，此页面设置只针对相对路径
location.href = "register_ok.html";4.重点部分总结：
1.验证码验证
//定义全局变量
var = flagg =true;
// 验证码验证
function checkCheck() {
//获取check边框对象
var check = $("#check");
//获取值
var checkVal = $("#check").val();
//获取code_msg显示信息对象
var codeMsg = $("#code_msg");
//判断输入验证码是否为空，长度是否为零
if (checkVal != "") {
alert("aaa");
$.get("CheckCodeServlet", {code: checkVal}, function (data) {
if (data.Exist) {
codeMsg.html(data.msg);
codeMsg.css("color", "green");
alert("bbb");
} else {
codeMsg.html(data.msg);
codeMsg.css("color", "red");
alert("ccc");
flagg = false;
}
}, "json");
} else {
alert("ddd");
check.css("border", "1px solid red");
codeMsg.html("验证码错误");
codeMsg.css("color", "red");
flagg = false;
}2.表单提交
$(function () {
//或$("#button_submit").submit(function () {
$("#button_submit").click(function () {
if (flagg) {
//提交服务器并，添加用户
$.post("AddUserServlet", $("#registerForm").serialize(), function (data) {
if (data.Exist) {
$("#errorMsg").html("请稍等...");
$("#errorMsg").css("color", "greed");
location.href = "register_ok.html";
} else {
$("#errorMsg").html("2.请检查输入信息");
$("#errorMsg").html(data1.errorMsg);
$("#errorMsg").css("color", "red");
$("#checkCode").click();
}
}, "json");
} else {
$("#errorMsg").html("1.请检查输入信息");
$("#errorMsg").css("color", "red");
$("#checkCode").click();
}
});
});扩展代码
邮箱激活界面，改自微软邮箱激活界面
public int addUser(User user) {
String uuid = UuidUtil.getUuid();
String content = "<table dir=\"ltr\">\n" +
" <tbody><tr><td id=\"i1\" style=\"padding:0; font-family:'Microsoft Yahei', Verdana, Simsun, sans-serif; font-size:17px; color:#707070;\">xx网 帐户td>tr>\n" +
" <tr><td id=\"i2\" style=\"padding:0; font-family:'Microsoft Yahei', Verdana, Simsun, sans-serif; font-size:41px; color:#2672ec;\">验证你的电子邮件地址td>tr>\n" +
" <tr><td id=\"i4\" style=\"padding:0; padding-top:25px; font-family:'Microsoft Yahei', Verdana, Simsun, sans-serif; font-size:14px; color:#2a2a2a;\">要完成此 xx网 帐户的设置，我们只需确保这是你的电子邮件地址。td>tr>\n" +
" <tr><td style=\"padding:0; padding-top:25px; font-family:'Microsoft Yahei', Verdana, Simsun, sans-serif; font-size:14px; color:#2a2a2a;\">\n" +
" <table border=\"0\" cellspacing=\"0\"><tbody><tr><td bgcolor=\"#2672ec\" " +
"style=\"background-color:#2672ec; padding-top: 5px; padding-right: 20px; padding-bottom: 5px; " +
"padding-left: 20px; min-width:50px;\"><a id=\"i5\" style=\"font-family: 'Microsoft Yahei', Verdana, " +
"Simsun, sans-serif; font-size:14px; text-align:center; text-decoration:none; font-weight:600; " +
"letter-spacing:0.02em; color:#fff;\" href=\"http://localhost/travel/ActiveUserServlet?code="+uuid +
"\" \"rel=\"noopener\" target=\"_blank\">验证 <span dir=\"ltr\">"+user.getEmail()+"span>a>td>tr>tbody" +
">table>\n" +
" td>tr>\n" +
" <tr><td id=\"i6\" style=\"padding:0; padding-top:25px; font-family:'Microsoft Yahei', Verdana, Simsun, sans-serif; font-size:14px; color:#2a2a2a;\">如果你没有提出此请求，请<a id=\"iCancel\" class=\"link\" style=\"color:#2672ec; text-decoration:none\" href=\"\" rel=\"noopener\" target=\"_blank\">单击此处a>取消。td>tr>\n" +
" <tr><td style=\"padding:0; padding-top:25px; font-family:'Microsoft Yahei', Verdana, Simsun, sans-serif; font-size:14px; color:#2a2a2a;\">谢谢!td>tr>\n" +
" <tr><td id=\"i8\" style=\"padding:0; font-family:'Microsoft Yahei', Verdana, Simsun, sans-serif; font-size:14px; color:#2a2a2a;\">xx网 帐户团队td>tr>\n" +
"tbody>table>";
MailUtils.sendMail(user.getEmail(), content, "xx网团队");
System.out.println("发送邮箱成功");
return dao.addUser(user,uuid);
}
自身不足：
1.缺乏练习
2.对代码理解的意义不够深刻
3.不能灵活运用
做于
2018.9.8 – 2：07：59
- - 不要假装努力，来开心自己 - -