文章标题

最新推荐文章于 2022-06-12 17:07:04 发布

qq_32397235

最新推荐文章于 2022-06-12 17:07:04 发布

阅读量247

点赞数

分类专栏： java 文章标签： ajax 表单 javascript

java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基于ssm的登录和非空检验

js代码

$(function(){
    //按钮点击事件  此处使用ajax方式提交   需将页面上的提交按钮 type属性修改为'button' form的表单提交路径删除
    $('#sub').click(function(){
        //非空验证 为空则停止方法 并将提示显示到页面上
        var username = $('#u').val();
        var pass = $('#p').val();
        if(username == null || username == ""){
            $('#tip').html("<font color = 'red ' size = '4'>   请输入账号！！</font>");
            return;
        }
        if(pass == null || pass == ""){
            $('#tip').html("<font color = 'red ' size = '4'>   请输入密码！！</font>");
            return;
        }
        //获取表单数据
        var formdata = {'username':username,'password':pass};
         //ajax提交数据
        $.ajax({
            url:'loginCheck',
            data:formdata,
            type:'post',
            success:function(data){
                //返回200则请求主页  其他返回值提示账号秘密错误
                if(data == '200'){
                    window.location.href='index';
                }else{
                    $('#tip').html("<font color = 'red ' size = '4'>账号或密码错误！！</font>");
                }
            }
        })
    })
})

html代码

<body>
<h1>客户关系管理系统-用户登录<sup>2016</sup></h1>

<div class="login" style="margin-top:50px;">

    <div class="header"> 
        <div class="switch" id="switch"><a class="switch_btn_focus" id="switch_qlogin" href="javascript:void(0);" tabindex="7">快速登录</a><span id = 'tip'></span>
        </div>
    </div>    

    <div class="web_qr_login" id="web_qr_login" style="display: block; height: 235px;">    
    <!--登录-->
      <div class="web_login" id="web_login">
         <div class="login-box">
            <div class="login_form">
                <form accept-charset="utf-8" id="login_form" class="loginForm" method="post">
                    <input type="hidden" name="did" value="0"/>
                    <input type="hidden" name="to" value="log"/>

                    <div class="uinArea" id="uinArea">
                        <label class="input-tips" for="u">帐号：</label>
                        <div class="inputOuter" id="uArea">
                            <input type="text" id="u" name="username" class="inputstyle"/>
                        </div>
                    </div>

                    <div class="pwdArea" id="pwdArea">
                       <label class="input-tips" for="p">密码：</label> 
                       <div class="inputOuter" id="pArea">
                            <input type="password" id="p" name="password" class="inputstyle"/>
                        </div>
                    </div>

                    <div style="padding-left:50px;margin-top:20px;">
                        <input type="button" value="登 录" style="width:150px;" class="button_blue" id = "sub"/>
                    </div>
                </form>
           </div>
         </div>
    </div>
    <!--登录end-->
  </div>

controller代码

@Controller
public class UserController {

    //注入UserService
    @Autowired
    private UserService userService;

    @RequestMapping("loginCheck")
    @ResponseBody
    public String loginToIndex(User user,HttpSession session){
        boolean success = userService.getUser(user);
        //登录成功  返回200
        if(success){
            session.setAttribute("username", user.getUsername());
            return "200";
        }
        //登录失败  随便返回一个字符串
        return "1000";
    }
}

qq_32397235

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文章标题

基于ssm的登录和非空检验js代码$(function(){ //按钮点击事件此处使用ajax方式提交需将页面上的提交按钮 type属性修改为'button' form的表单提交路径删除 $('#sub').click(function(){ //非空验证为空则停止方法并将提示显示到页面上 var username = $('#u').v
复制链接

扫一扫