您的位置:首页 > Web前端 > JQuery

jQuery实现简单的用户名验证

2016-09-06 18:21 330 查看
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);
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息