jQuery를 사용하여 Ajax 작업 구현
새로고침 효과 없이 Ajax 페이지를 구현하고 싶은데, Ajax 코드를 직접 사용하기는 좀 번거로워서 jQuery를 사용해서 구현하고 싶습니다. jQuery는 Ajax의 핵심 객체인 XMLHTTPRequest를 훌륭하게 캡슐화합니다. 그래서 사용하기가 매우 편리합니다.
먼저 서버측 코드를 생성합니다. 여기서는 서버측 데이터 처리를 구현하기 위해 Servlet을 사용합니다.
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 设置编码格式 resp.setContentType("text/html;charset=UTF-8"); // 创建输出对象 PrintWriter out = resp.getWriter(); // 得到请求参数 String name = req.getParameter("uname"); // 判断 if (name == null || name.length() == 0) { out.println("用户名不能为空!"); } else { // 判断 if (name.equals("cheng")) { out.println("用户名["+ name +"]已存在!请使用其他用户名!"); } else { out.println("用户名[" + name + "]尚未存在!您可以注册!"); } } }
그런 다음 JSP 페이지를 생성하려면 다음과 같이 Javascript 파일인 jQuery 라이브러리를 페이지에 도입해야 합니다.
<!-- 引入Javascript文件 --> <script type="text/javascript" src="js/jquery-1.2.6.js"></script> <script type="text/javascript" src="js/verify.js"></script>
JSP 페이지에는 텍스트 상자, 일반 버튼 및 빈 DIV 레이어만 필요합니다. DIV는 서버에서 반환된 처리 결과를 표시하는 데 사용되며 버튼의 클릭 이벤트는 verify() 메서드를 트리거합니다. 다음과 같습니다:
<body> <center> 用户名:<input type="text" id="uname" name="uname" /> <br /> <input type="button" name="btnVerify" value="验证" onclick="verify()" /> <br /> <div id="result"> </div> </center> </body>
참고: Ajax 모드에서는 데이터를 제출하기 위해 양식을 사용할 필요가 없으므로 페이지에