我之前一直以为ajax就是局部刷新，现在才略微明白他是前端与后端异步交互的一种方式，其最大的优势在于不需要整个页面向后端发送请求，而可以提供我们需要与数据库比对的特定值给Servlet，
让Servlet一层一层往后调用方法获取数据库中的值进行比对，然后返回JSON给前端，前端利用后端传来的JSON进行判断并展示特定内容(JS实现)
JSON大概的样子--->{"":"","":""},类型于Map的形式，我们可以通过阿里巴巴的fastJSON依赖里的JSONArray.toJSONString()方法将Map转为JSON
下面代码以修改密码为例，利用ajax向Sevlet传递了旧密码的值，Servlet通过Session获取用户原密码，两者进行比较，将对应的情况值存入map，然后转为JSON传回前端，前端通过.键名获取键值，进行判断，最后展示
代码部分仅供参考
页面展示
<form action="userUpdate" method="get" id="userForm">
<input type="hidden" name="method" value="savepwd">
<label for="oldPassword">旧密码：</label><input type="password" name="oldPassword" id="oldPassword"><span style="color: red"></span><br/>
<label for="newPassword">新密码：</label><input type="password" name="newPassword" id="newPassword"><span style="color: red"></span><br/>
<label for="conNewPassword">确认新密码：</label><input type="password" name="conNewPassword" id="conNewPassword"><span style="color: red"></span><br/>
<input type="button" name="save" id="save" value="确认修改">
</form>
核心代码1，Jquery
$(function () {
var oldPassword = $("#oldPassword");
var newPassword = $("#newPassword");
var conNewPassword = $("#conNewPassword");
var saveBtn = $("#save");
oldPassword.on("blur",function () {
$.ajax({
type:"GET",
url:"userUpdate",
//传参数给后台，参数名：参数值
data:{method:"pwdmodify",oldPassword:oldPassword.val()},
dataType:"json",
success:function (data) {
if(data.result == "true"){
oldPassword.next().css({"color":"green"});
oldPassword.next().html("正确");
oldPassword.VALIDATE_STATUS = true;
}else if(data.result == "false"){
oldPassword.next().css({"color":"red"});
oldPassword.next().html("原密码输入不正确");
oldPassword.VALIDATE_STATUS = false;
}else if(data.result == "sessionerror"){
oldPassword.next().css({"color":"red"});
oldPassword.next().html("当前用户session过期，请重新登录");
oldPassword.VALIDATE_STATUS = false;
}else if(data.result == "error"){
oldPassword.next().css({"color":"red"});
oldPassword.next().html("旧密码不能为空");
oldPassword.VALIDATE_STATUS = false;
}
},
error:function (data) {
oldPassword.next().css({"color":"red"});
oldPassword.next().html("请求错误");
oldPassword.VALIDATE_STATUS = false;
}
});
}).on("focus",function () {
oldPassword.next().css({"color":"#666666"});
oldPassword.next().html("请输入旧密码");
oldPassword.VALIDATE_STATUS = false;
})
saveBtn.on("click",function () {
oldPassword.blur();
newPassword.blur();
conNewPassword.blur();
if(oldPassword.VALIDATE_STATUS==true){
if(confirm("确认要修改密码？")){
$("#userForm").submit();
}
}
})
});
核心代码2，Servlet部分
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String method = req.getParameter("method");
if(method.equals("pwdmodify")){
this.pwdModify(req,resp);
}else if(method.equals("savepwd")){
this.savePwd(req,resp);
}
}
private void pwdModify(HttpServletRequest req, HttpServletResponse resp) {
Object o = req.getSession().getAttribute(Constant.USER_SESSION);
String oldPassword = req.getParameter("oldPassword");
HashMap<String,String> resultMap = new HashMap<String,String>();
if(o==null){
resultMap.put("result","error");
}else if(StringUtils.isNullOrEmpty(oldPassword)){
resultMap.put("result","error");
}else {
String userPassword = ((User) o).getPassword();
if (oldPassword.equals(userPassword)) {
resultMap.put("result", "true");
}else{
resultMap.put("result","false");
}
}
try {
resp.setContentType("application/json");
PrintWriter writer = resp.getWriter();
writer.write(JSONArray.toJSONString(resultMap));
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
private void savePwd(HttpServletRequest req, HttpServletResponse resp) {
UserService userService = new UserServiceImpl();
String newPassword = req.getParameter("newPassword");
int id = ((User)req.getSession().getAttribute(Constant.USER_SESSION)).getId();
int result = userService.savePwd(newPassword,id);
if(result>0){
req.getSession().removeAttribute(Constant.USER_SESSION);
try {
resp.sendRedirect(req.getContextPath()+"/Login.jsp");
} catch (IOException e) {
e.printStackTrace();
}
}
}
实体类
public class User {
private int id;
private String username;
private String password;
private String remark;
private int role_id;
public User() {
}
public User(int id, String username, String password, String remark, int role_id) {
this.id = id;
this.username = username;
this.password = password;
this.remark = remark;
this.role_id = role_id;
}
public User(String username, String password, String remark, int role_id) {
this.username = username;
this.password = password;
this.remark = remark;
this.role_id = role_id;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getRemark() {
return remark;
}
public void setRemark(String remark) {
this.remark = remark;
}
public int getRole_id() {
return role_id;
}
public void setRole_id(int role_id) {
this.role_id = role_id;
}
@Override
public String toString() {
return id+"--"+username+"--"+password+"--"+remark+"--"+role_id;
}
}
大致效果
From 西部开源