javaWeb之ajax小案例

最新推荐文章于 2023-06-23 08:35:29 发布

anly599

最新推荐文章于 2023-06-23 08:35:29 发布

阅读量828

点赞数

分类专栏： javaWeb 文章标签： ajax js html

本文链接：https://blog.csdn.net/qq_38438533/article/details/108673106

版权

javaWeb 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

ajax异步请求小案例

注册时验证用户名是否存在

HTML代码及页面

    <style>
        body{
            margin: 0 auto;
        }
        div{
            width: 100%;
            height: 100%;
        }
        input{
            font-size: 20px;
            line-height: 30px;
            margin-bottom: 10px;
        }
        input[type="button"]{
            width: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script>
    $(function(){
        //页面加载成功
        //给username输入框添加事件
        $("#username").on("blur",function(){
            //当输入框失去光标后，就向后端发送ajax请求
            $.ajax({
                url:"s1",
                async:true,
                data:"username="+$("#username").val(),
                type:"post",
                dataType:"json",
                success:function(data){
                   var $show = $("#show_msg");
                    $show.text(data.msg)
                   if (data.code == 1){
                       $show.css("color","red")
                   }else{
                       $show.css("color","green")
                   }
                },
                error:function(){
                    alert("服务器发生错误")
                }
            });
        })
    })
</script>
    <div>
        <form>
            <h1>邮箱账号登录</h1>
            <input type="text" id="username" name="username" placeholder="邮箱账号或手机号码"><span id="show_msg"></span><br/>
            <input type="password" name="password" placeholder="输入密码"><br/>
            <input type="button" value="注册">
        </form>
    </div>

</body>

后端代码

message

public class Message {
    private String msg;
    private int code;

    public Message() {
    }
    }

servlet

	    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求参数
        String username = request.getParameter("username");
        //新建一个Message类
        Message message = new Message();
        //判断请求参数是否存在
        if ("jack".equals(username)){
            message.setMsg("该邮箱地址已被注册");
            message.setCode(1);
        }else{
            message.setMsg("恭喜，该邮件地址可以注册");
            message.setCode(0);
        }
        //将message对象中的数据，转换成json数据
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(new ObjectMapper().writeValueAsString(message));
    }

代码运行截图

总结

写ajax代码时，一定要记得它的代码结构，从后端传输过来的数据只能是字符类型和json类型。将数据转成json时，需要第三方工具。使用时记得导入jar包

anly599

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javaWeb之ajax小案例

ajax异步请求小案例注册时验证用户名是否存在HTML代码及页面 <style> body{ margin: 0 auto; } div{ width: 100%; height: 100%; } input{ font-size: 20px; line-height: 30px;
复制链接

扫一扫