5、Ajax\form与servlet

为了解决前后端的传输问题使用表单和Ajax的传输方式。

其中表单对于后端的返回值不会接收,Ajax会接收。

form如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form表单登陆页面</title>
</head>
<body>
    <form action="index.jsp" method="get">
        <span>账号</span><input type="text" name="username">
        <input type="submit">
    </form>
</body>
</html>

ajax如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax登陆页面</title>
</head>
<body>
        <span>账号</span><input type="text" name="username">
        <button>登陆</button>
        
        
        
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $("button").click(function(){
            var username = $("input[name=‘username‘]").val();
            $.ajax({
                url:"user?method=login",            //请求地址
                type:"get",        //请求方式
                data:{            //前端给后台发送的参数
                    key:username
                },    
                dataType:"json",    //后台给前端返回参数的格式
                success:function(result){    //result后台给前端响应的参数
                    if(result.status == true){
                        location.href = "index.jsp";
                    }else{
                        alert(result.message);
                    }
                }
            }); 
        });
    </script>
</body>
</html>

其中返回值使用json是使用一个resultmap类返回,并使用fastjson

String username = req.getParameter("key");
if(username.equals("gjj")) {
resultMap.setStatus(true);
}else {
resultMap.setStatus(false);
resultMap.setMessage("用户名输入有误!");
}
String jsonStr = JSON.toJSONString(resultMap);
return jsonStr;

 

5、Ajax\form与servlet

上一篇:Hive metastore三种配置方式


下一篇:DevExpress的GridControl的使用以及怎样添加列和绑定数据源