基于jQuery与Spring MVC实现用户密码异步修改的实战演示

文章目录

  • 一、实战概述
  • 二、实战步骤
    • (一)创建表单
      • 1、表单界面
      • 2、表单代码
      • 3、脚本代码
    • (二)后端控制器
    • (三)测试代码,查看效果
      • 1、弹出更改密码表单
      • 2、演示更改密码操作
  • 三、实战总结

一、实战概述

  • 本次实战展示了使用jQuery的$.post()方法实现异步提交表单以修改用户密码的过程。在HTML部分,定义了一个包含新密码和确认密码输入框的表单,点击“确定”按钮时调用JavaScript函数changePassword()

  • 在JavaScript脚本中,changePassword()函数通过jQuery的$.post()方法向服务器发送一个POST请求至’/user/changePassword’路径,并携带新密码作为请求参数。服务器端采用Spring MVC框架编写,具体由UserController中的changePassword()方法处理请求。此方法从HttpSession中获取当前登录用户的用户名,查询数据库找到对应用户并更新其密码,成功更新后返回一个Map对象,其中包含success为true的属性表示操作成功。

  • 当服务器返回响应数据后,前端根据data.success的值判断密码更改是否成功,并通过alert对话框提示用户结果,同时清空密码输入框以便后续再次使用。整个过程实现了无刷新页面更新,提升了用户体验与系统响应速度。

二、实战步骤

(一)创建表单

1、表单界面

  • 采用Bootstrap3框架
    在这里插入图片描述

2、表单代码

<form id="ff" method="post">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
        <input id="password" class="form-control" type="text" name="password" placeholder="输入新密码"/>
    </div>
    <div class="input-group" style="margin-top: 5px;">
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
        <input id="repassword" class="form-control" type="text" name="repassword"
               placeholder="再次输入新密码"/>
    </div>
    <br/>
    <div class="form-group">
        <div class="text-center">
            <a href="javascript:changePassword()" class="btn btn-success btn-block"
               onclick="return checkPassword()">确定</a>
        </div>
    </div>
</form>

3、脚本代码

<script type="text/javascript">
    function changePassword() {
        $.post('/user/changePassword', {"password":$("#password").val()}, function (data) {
           if (data.success) {
               alert("恭喜,密码更改成功!");
               $('#password').val("");
               $('#repassword').val("");
           } else {
               alert("遗憾,密码更改失败!");
           }
        });
    }
</script>

(二)后端控制器

  • 用户控制器 - UserContrller
    在这里插入图片描述
  • 只写更改密码处理方法,其余方法省略
package net.hw.shop.webmvc;

import net.hw.shop.bean.Category;
import net.hw.shop.bean.Order;
import net.hw.shop.bean.Product;
import net.hw.shop.bean.User;
import net.hw.shop.service.CategoryService;
import net.hw.shop.service.OrderService;
import net.hw.shop.service.ProductService;
import net.hw.shop.service.UserService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import sun.misc.resources.Messages_pt_BR;

import javax.annotation.Resource;
import javax.servlet.http.HttpSession;
import java.sql.Timestamp;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 功能:用户控制器
 * 作者:华卫
 * 日期:2017年04月28日
 */
@Controller
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserService userService;   

    @RequestMapping("/changePassword")
    @ResponseBody
    public Map<String, Object> changePassword(@RequestParam("password") String password,
                                              HttpSession session) {
        String username = (String) session.getAttribute("username");
        User userParam = new User();
        userParam.setUsername(username);
        User user = userService.findList(userParam).get(0);
        user.setPassword(password);
        int count = userService.save(user);
        Map<String, Object> map = new HashMap<String, Object>();
        if (count > 0) {
            map.put("success", true);
        }
        return map;
    }   
}

(三)测试代码,查看效果

1、弹出更改密码表单

  • 在管理后台单击【更改密码】选项卡,弹出更改密码表单
    在这里插入图片描述

2、演示更改密码操作

  • 输入新密码与确认密码,单击【确定】按钮,弹出消息框提示用户
    在这里插入图片描述

三、实战总结

  • 本次实战通过前后端结合的方式,演示了如何使用jQuery的$.post()方法实现用户密码异步修改功能。前端采用Bootstrap框架构建简洁美观的表单界面,并利用JavaScript进行表单验证和异步提交处理;后端运用Spring MVC框架接收并处理请求,根据HttpSession中存储的用户名查询数据库,更新用户密码信息,并返回操作结果至前端。整个流程实现了页面无刷新更新密码,不仅提升了用户体验,也体现了前后端分离开发的优势以及jQuery在前端交互中的便捷性。通过实战演练,展示了Web应用中常见表单操作与后端数据交互的完整过程。