JavaWeb day10-Jquery综合练习

最新推荐文章于 2022-09-13 08:40:48 发布

好哥哥1998

最新推荐文章于 2022-09-13 08:40:48 发布

阅读量207

点赞数

分类专栏： javaweb 文章标签： ajax jquery

本文链接：https://blog.csdn.net/qq_42640205/article/details/108671360

版权

javaweb 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍如何使用jQuery的AJAX功能实现用户注册时的异步校验。通过理解同步与异步请求的区别，掌握AJAX的基本概念和JSON格式，详细讲解了从编写表单、构造jQuery请求到后端Servlet处理的完整流程，最终实现页面局部刷新显示校验信息。

摘要由CSDN通过智能技术生成

利用ajax实现用户注册校验

同步请求和异步请求

同步：发送同步请求，服务器响应后，页面整体刷新
异步：发送异步请求，服务器响应后，页面局部刷新

本次练习只需在注册界面局部刷新提示检验信息，所以使用异步请求，故千万不能使用转发和重定向。

什么是ajax

Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
用于浏览器和服务器之间的异步请求机制

jQuery框架下的ajax函数

在这里插入图片描述

什么是json字符串

JSON( JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。

json格式语法

在这里插入图片描述

代码实现

编写页面表单

<form method="post" action="${pageContext.request.contextPath}/register.jsp"> 
    username:<input id = "username" name="username" type="text"><br/>
    <div id = "msg" style="color: green" ></div>

    password:<input id = "password" name="password" type="text"><br/>
    <input type="submit" value="注册"><br/>

</form>

编写jquery请求

<script type="text/javascript" src="${pageContext.request.contextPath}/register.jsp"></script>
<script type="text/javascript">
    $(function () {
    //获取输入框,blur方法表示元素失去焦点时发生的时间
        $("#username").on(blur(),function () {
        //发送请求
            $.ajax({
                url:"queryUsername",
                async:true,
                data:"username="+$("#username").val(),
                type:"post",
                dataType:"json",
                success:function (data) {
               // 根据服务端返回的json数据，编写显示逻辑
                    if(data.code == 0){
                        $("#msg").text(data.msg)

                        $("#msg").css("color","green")
                    }else{
                        $("#msg").text(data.msg)

                        $("#msg").css("color","red")
                    }
                },
                error:function () {
                    alert("服务器发生了错误")
                }
            });

        })

    })
</script>

servelet代码

@WebServlet("/Servlet01")
public class Servlet01 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收请求获取参数;
        String username = request.getParameter("username");
        //处理业务逻辑
        Res res =new Res();
        if("xiaoming".equals(username)){
            res.setMsg("该邮箱已注册");
            res.setCode(1);
        }else {
            res.setMsg("注册成功");
            res.setCode(0);
        }
        response.setContentType("text/html;charset=utf-8");
        //将传入对象化为json传给前端
        response.getWriter().println(new ObjectMapper().writeValueAsString(res));
       
    }
}