利用Ajax提交表单

Html表单

用户名:<input type="text" name="username" id="username1"/><br>
密码:<input type="password" name="password" id="password1""/><br>
<input type="button" value="登陆" id="btn"/>

Ajax部分

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.4.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").click(function(){
                $.ajax({
                    type:'POST',
                    url:'${pageContext.request.contextPath}/Login/loginVerify',
                    //data发送请求数据,val()为文本内容
                    //不能进行输入写的Html标签文本内容用text()获取
                    data:{
                        username:$("#username1").val(),
                        password:$("#password1").val()
                    },
                    success:function(data){
                        //JS输出JSON数据
                        alert(data.message);
                    },
                    error:function(){
                        alert("服务器异常");
                    }

                });
            });
        });

    </script>

后台Servet部分

@RequestMapping(value="loginVerify",method=RequestMethod.POST)
public void loginVerify(HttpServletRequest request , HttpServletResponse response,User user) throws Exception{
        String username = user.getUsername();
        String password = user.getPassword();
        //设置response的编码方式
        response.setCharacterEncoding("utf-8");
        //设置response的返回数据类型,JSON数据
        response.setContentType("application/json;charset=utf-8");
        if(username==null||password==null||"".equals(username)||"".equals(password)){
            //JSON中写入字符串要用\"转义,''单引无效
            response.getWriter().write("{\"message\":\"账号或密码不能为空\"}");
            return;
        }else if("admin".equals(username)&&"1234".equals(password)){
            response.getWriter().write("{\"message\":\"账号密码正确!\"}");
            return;
        }else{
            response.getWriter().write("{\"message\":\"账号或密码错误!\"}");
            return;
        }

    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值