使用jquery中封装的$.Ajax()进行异步通信并使用json方式实现数据传输

最新推荐文章于 2024-08-15 22:10:13 发布

LJ君

最新推荐文章于 2024-08-15 22:10:13 发布

阅读量130

点赞数

分类专栏： jsp script 文章标签： ajax js java

本文链接：https://blog.csdn.net/qq_45068048/article/details/109247895

版权

jsp 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

script

3 篇文章 0 订阅

订阅专栏

该博客展示了在HTML表单中实现用户输入验证的示例，使用JavaScript（jQuery）进行前端验证，并通过Ajax与Java Servlet进行交互，进行后台数据检查。当用户名为空时，前端会显示错误提示；否则，将发送POST请求到`/checkServlet`，根据后台返回的JSON数据更新反馈信息。后台Servlet接收到请求后，判断用户名是否为'admin'，并返回相应的验证结果。

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

客户端：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="#" method="post">
    用户名： <input type="text" name="username" id="username" onblur="onChang()">
    <span id="spanUser"></span>
</form>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/ajax/jquery/jquery-1.12.4.js"></script>
<%--<script src="jquery\jquery-1.12.4.js"></script>--%>
<script>
    var xml=null;
    function onChang() {
        var username=$("#username").val();
        if (username=="") {
            $("#spanUser").html("<font color='red'>用户名不可以为空</font>")
        }
        else {
            $.ajax(
                {
                    //服务器路径
                    url:"/java92web/checkServlet",
                    //提交方式
                    type:"post",
                    //参数  以json的方式进行传输；
                    data:{name:username},
                    //结果返回的形式
                    dataType:"json",
                    //成功后返回的结果
                    success:function (result) {
                        if (result.recode==1) {
                            $("#spanUser").html("<font color='red'>"+result.retmsg+"</font>")
                        }else
                        {
                            $("#spanUser").html("<font color='green'>"+result.retmsg+"</font>")
                        }

                    },
                    //失败的情况
                    error:function () {
                        alert("请联系管理员");

                    }
                }
            )
        }
    }

</script>
</html>

服务器：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/checkServlet")
public class checkServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String name=request.getParameter("name");
        if (name.equals("admin")) {
            out.print("{\"recode\":1,\"retmsg\":\"已注册\"}");
        }
        else {
            out.print("{\"recode\":2,\"retmsg\":\"可以使用\"}");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

LJ君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jquery中封装的$.Ajax()进行异步通信并使用json方式实现数据传输

客户端：<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title></head><body><form action="#" method="post"> 用户名： <input type="text" name="username" id="
复制链接

扫一扫

专栏目录