jQuery实现简单的用户名验证

最新推荐文章于 2021-10-20 22:11:23 发布

toypipi

最新推荐文章于 2021-10-20 22:11:23 发布

阅读量616

点赞数

CC 4.0 BY-SA版权

分类专栏： Java Web 文章标签： jquery get ajax 乱码用户名验证

本文链接：https://blog.youkuaiyun.com/maxine_du/article/details/52452413

Java Web 专栏收录该内容

6 篇文章

订阅专栏

jQuery.get()函数的详细使用可以参考这里。注意get方式需要使用

resp.setContentType("text/html;charset=utf-8");
String old = req.getParameter("name");
String name = new String(old.getBytes("iso-8859-1"),"utf-8");

解决乱码问题。

源码如下：ajax.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>用户名校验</title>
    <script src="js/jquery-2.1.1.min.js" type="application/javascript"></script>
    <script src="js/verify.js" type="application/javascript"></script>
</head>
<body>
    请输入用户名：
    <br />
    <input type="text" id="userName" />
    <input type="button" value="校验" onclick="verify()">
    <div id="result"></div>
</body>
</html>

ajaxservlet.java

package com.count.Online;

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

/**
 * Created by root on 2016/9/6.
 */
public class ajaxservlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        try {
            resp.setContentType("text/html;charset=utf-8");
            String old = req.getParameter("name");
            String name = new String(old.getBytes("iso-8859-1"),"utf-8");
            PrintWriter out = resp.getWriter();
            System.out.println(name);
            if (old == null || old.length() == 0) {
                out.print("用户名不能为空");
            } else {
                if (name.equals("大白喵")) {
                    out.println("用户名【" + name + "】已经存下，请使用其他用户名");
                } else {
                    out.println("用户名【" + name + "】不存在，可以使用");
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

web.xml代码片段

    <servlet>
        <servlet-name>ajaxServlet</servlet-name>
        <servlet-class>com.count.Online.ajaxservlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ajaxServlet</servlet-name>
        <url-pattern>/ajaxservlet</url-pattern>
    </servlet-mapping>

verify.js

/**
 * Created by root on 2016/9/6.
 */
function verify() {
    var jqueryObj = $("#userName");
    var userName = jqueryObj.val();
    $.get("ajaxservlet?name=" + userName, null, callback);

    function callback(data) {
        var resultObj = $("#result");
        resultObj.html(data);
    }
}