이 예제는 참고용으로 JQuery 사용자 이름 확인 기능을 공유합니다.
$(document).ready(function(){}): 페이지가 로드될 때 실행되어야 하는 메서드를 정의합니다.
$()는 페이지에서 지정한 노드를 가져오고 매개변수는 일종의 CSS 선택기입니다. 반환되는 것은 JQuery 메소드가 실행될 수 있는 JQuery 객체입니다.
val() 메소드는 노드의 value 속성 값을 얻을 수 있습니다
html()은 노드에 html 콘텐츠를 설정합니다
click() 해당 마우스 클릭 이벤트
keyup() 해당 키보드 팝업 이벤트
$.get()은 get 모드에서 서버와 상호 작용할 수 있습니다. 등록된 콜백 메서드는 데이터가 반환될 때 호출됩니다. 이 메서드는 서버에서 반환된 데이터를 나타내는 일반 텍스트 매개 변수를 받습니다.
addClass()removeClass() 노드에 클래스 추가 또는 삭제
한자 깨짐 문제 해결: 서버로 전송된 데이터를 js에서 두 번 인코딩한 후 서버 코드에서 UTF-8로 한 번 URL디코딩합니다
메인 코드:
$.get("http://localhost:8080/JQueryStudy/UserVerify?userName=" + encodeURI(encodeURI(userName)),null, function(response){ $("#result").html(response); } )
처리된 서블릿
/* * To change this template, choose Tools | Templates * and open the template in the editor. */ package com.linying; import java.io.IOException; import java.io.PrintWriter; import java.net.URLDecoder; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * 用户名验证Servlet * @author Ying-er * @time 2010-4-25下午08:02:08 * @version 1.0 */ public class UserVerify extends HttpServlet { /** * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods. * @param request servlet request * @param response servlet response */ protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { String param = request.getParameter("userName"); if (param == null || param.length() == 0) { out.println("用户名不能为空"); } else { String userName = URLDecoder.decode(param, "UTF-8"); System.out.println(userName); if (userName.equals("Ying-er")) { out.println("用户名[" + userName + "]已经存在,请使用别的用户名注册"); } else { out.println("可以使用用户名[" + userName + "]注册"); } } } finally { out.close(); } } // <editor-fold defaultstate="collapsed" desc="HttpServlet"> /** * Handles the HTTP <code>GET</code> method. * @param request servlet request * @param response servlet response */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** * Handles the HTTP <code>POST</code> method. * @param request servlet request * @param response servlet response */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** * Returns a short description of the servlet. */ public String getServletInfo() { return "Short description"; }// </editor-fold> }
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.