이번에는 $.post 메소드를 사용하여 사용자 이름을 확인하는 ajax의 주의 사항을 소개하겠습니다. 다음은 실제 사례입니다.
첫 번째 유형: 기존 Ajax 비동기 요청, 배경 코드 및 효과는 맨 아래에 있습니다.
먼저 eclipse에서 등록 페이지regist.jsp를 만들고 양식을 만듭니다. 사용자 이름 확인의 효과로 인해 아래 빨간색 부서는 우리가 연구해야 할 대상이므로 다른 부서는 무시할 수 있습니다.
내용은 다음과 같습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户注册</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/login.css" rel="external nofollow" > <script type="text/javascript"> //第三步:ajax异步请求用户名是否存在 function checkUsername(){ // 获得文本框值: var username = document.getElementById("username").value; // 1.创建异步交互对象 var xhr = createXmlHttp();//第二步中已经创建xmlHttpRequest,这里直接调用函数就可以了。 // 2.设置监听 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //把返回的数据放入到span中 document.getElementById("span").innerHTML = xhr.responseText;//responseText是后台返回的数据 } } } // 3.打开连接 xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true); // 4.发送 xhr.send(null); } //第二部:创建xmlHttp对象 function createXmlHttp(){ var xmlHttpRequest; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttpRequest; } function change(){ var img1 = document.getElementById("checkImg"); img1.src="${pageContext.request.contextPath}/checkImg.action?"+new Date().getTime(); } </script> </head> <body> <form action="${pageContext.request.contextPath }/user_regist.action" method="post" onsubmit="return checkForm()";> <p class="regist"> <p class="regist_center"> <p class="regist_top"> <p class="left fl">会员注册</p> <p class="right fr"><a href="${pageContext.request.contextPath }/index.jsp" rel="external nofollow" target="_self">小米商城</a></p> <p class="clear"></p> <p class="xian center"></p> </p> <p class="regist_main center"> //第一步:首先,我们创建一个用户名input输入框,并添加一个onblur="checkUsername()"事件 <p class="username">用 户 名: <input class="shurukuang" type="text" id="username" name="username" onblur="checkUsername()"/><span id="span"></span></p> <p class="username">密 码: <input class="shurukuang" type="password" id="password" name="password"/></p> <p class="username">确认 密码: <input class="shurukuang" type="password" id="repassword" name="repassword" /></p> <p class="username">邮 箱 号: <input class="shurukuang" type="email" id="email" name="email" /></p> <p class="username">姓 名: <input class="shurukuang" type="text" id="name" name="name"/></p> <p class="username">手 机 号: <input class="shurukuang" type="text" id="phone" name="phone"/></p> <p class="username">地 址: <input class="shurukuang" type="text" id="addr" name="addr"/></p> <p class="username"> <p class="left fl">验 证 码: <input class="yanzhengma" type="text" id="checkcode" name="checkcode" maxlength="4"/></p> <p class="right fl"><img id="checkImg" class="captchaImage" src="${pageContext.request.contextPath}/checkImg.action" onclick="change()" title="点击更换验证码"></p> <p class="clear"></p> </p> </p> <p class="regist_submit"> <input class="submit" type="submit" name="submit" value="立即注册" > </p> </p> </p> </form> </body> </html>
두 번째 방법: jQuery에서 ajax를 사용하여 위의 효과를 얻습니다. 우선, 폼과 액션은 그대로 유지되며, 스크립트만 변경하면 됩니다.
1단계: js 파일 소개
2단계:
//ajax异步请求用户名是否存在 $(function(){ $('#username').change(function(){//给username添加一个change事件 var val = $(this).val();//获取输入框的值 val = $.trim(val);//去空 if(val != ""){//判断值是否为空 var url = "${pageContext.request.contextPath}/user_findByName.action";//url还是那个URL var args ={"time":new Date().getTime(),"username":val};//这里和上面不同的是,这里用json方式实现传入的time和username参数 $.post(url,args,function(data){//发送post请求,后台返回的数据在data里面, $('#span').html(data);//把后台返回的数据放入span中 }); } }); })
그런 다음 배경 데이터가 어떻게 반환되는지 살펴보겠습니다. ssh 프레임워크를 이용하여 구현하는 것이므로 편의상 Action에서 데이터를 반환하는 방법만 설명하겠습니다. ssh 프레임워크에서 서비스 레이어와 dao 레이어 구현에 대해서는 직접 해결해 주시기 바랍니다.
public class UserAction extends ActionSupport implements ModelDriven<User> { private static final long serialVersionUID = 1L; /** * 模型驱动 */ private User user = new User(); @Override public User getModel() { return user; } // 注入UserService private UserService userService; public void setUserService(UserService userService) { this.userService = userService; }
/** * AJAX进行异步校验用户名的执行方法 * * @throws IOException */ public String findByName() throws IOException { User existUser = userService.findByName(user.getUsername());//调用service层的方法返回数据库中查询出来的对象 // 获得response对象,向页面输出: HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/html;charset=UTF-8");//设置编码格式 // 判断返回的对象是否为空 if (existUser != null) { // 如果有,查询到该用户:用户名已经存在 response.getWriter().println("用户名已经存在"); } else { // 如果没有,用户名可以使用 response.getWriter().println("<font color='green'>用户名可以使用</font>"); } return NONE;//此处返回空 }
효과는 다음과 같습니다:
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP의 다른 관련 기사에 주목하십시오. 중국사이트!
추천 자료:
ajax에서 josnp를 사용하여 josn 데이터를 수신하는 단계에 대한 자세한 설명
프런트 엔드 Ajax 요청에 대한 우아한 솔루션을 구현하는 방법
위 내용은 ajax는 $.post 메소드를 사용하여 사용자 이름을 확인합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!