菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
424
0

5、Ajax\form与servlet

原创
05/13 14:22
阅读数 93565

为了解决前后端的传输问题使用表单和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;

 

发表评论

0/200
424 点赞
0 评论
收藏
为你推荐 换一批