利用Ajax提交表单

Html表单

用户名: type="text" name="username" id="username1"/>

密码: type="password" name="password" id="password1""/>

" 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;
        }

    }