ホームページ >ウェブフロントエンド >jsチュートリアル >SSHオンラインモールはajaxを使用してユーザー名の非同期認証を完了します
この記事では、主に SSH オンライン ショッピング モールでユーザー名の非同期検証を完了するための ajax の使用に関する関連情報を紹介します。必要な場合は、それを参照してください。
インターネットをサーフィンするときに、特定のビデオ素材をダウンロードまたは視聴する必要があります。タオバオを閲覧するとき、私たちは皆、ユーザーを登録する必要があります。さまざまな情報を入力して「OK」をクリックすると、ユーザー名がすでに存在するというメッセージが表示されます。ユーザー名を入力すると、自動的にユーザー名が表示されるのはなぜだろうと不思議に思っています。エディターの最近のプロジェクトでは、今日のブログでユーザー名が Yes であるかどうかを確認するために、この問題に遭遇しました。 , 編集者が検証を完了するための ajax の使い方を簡単にまとめますので、アドバイスをお願いします`(*∩_∩*)'!
まず、ajax はユーザー名が存在するかどうかの非同期検証を完了しますが、どのように実行すればよいでしょうか。ここでは、イベントによってトリガーする必要があります。つまり、ユーザー名を入力するとマウスが移動し、逆にマウスが内側に置かれるとフォーカスが失われます。これを onblur と呼びますが、フォーカスを失った場合はどうすればよいでしょうか。まず登録ページを見つけ、登録ページでユーザー名のコードを見つけます。最後に onblur=checkUsername() を追加してユーザー名を確認します。次に、メソッド checkUsername を記述します。具体的なコードは次のとおりです:
<span style="font-size:18px;">function checkUsername() { //获取文本框值: var username = document.getElementById("username").value; //1、创建异步交互对象 var xhr = createXmlHttp(); //2、设置监听 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { document.getElementById("span1").innerHTML = xhr.responseText; } } } //3、打开连接 xhr.open("GET", "${pageContext.request.contextPath}/user_findByName.action?time=" + new Date().getTime() + "&username=", true) //4、发送 xhr.send(null); } function createXmlHttp() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } return xmlHttp; } </span>
次に、エンティティ Vo を作成し、モデル ドライブを実装し、カプセル化を自動的に実装します。具体的なコードは次のとおりです。
<span style="font-size:18px;">package cn.itcast.shop.user.vo; public class User { private Integer uid; private String username; private String password; private String name; private String email; private String phone; private String addr; private Integer state; private String code; public Integer getUid() { return uid; } public void setUid(Integer uid) { this.uid = uid; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } public String getAddr() { return addr; } public void setAddr(String addr) { this.addr = addr; } public Integer getState() { return state; } public void setState(Integer state) { this.state = state; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } }</span>
ActionSupport は、modelDriven を直接実装することができます。次に、Ajax コードをアクションに送信する必要があります。具体的なコードは次のとおりです。次に、サービスを設定するだけです。 Dao を applicationContext に追加します。コードは次のとおりです。
<span style="font-size:18px;">package cn.itcast.shop.user.action; import java.io.IOException; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import cn.itcast.shop.user.service.UserService; import cn.itcast.shop.user.vo.User; import com.opensymphony.xwork2.ActionSupport; import com.opensymphony.xwork2.ModelDriven; /** * 用户模块Action的类 * @author Flower * */ public class UserAction extends ActionSupport implements ModelDriven<User> { //模型驱动使用的对象 private User user = new User(); public User getModel(){ return user; } //注入UserService private UserService userService; public void setUserService(UserService userService){ this.userService=userService; } /** * 跳转到注册页面的执行方法 */ public String registPage(){ return "registPage"; } /** * ajax进行异步校验用户名的执行方法 * @throws IOException */ public String findByName() throws IOException{ //调用Service进行查询 User existUser = userService.findByUsername(user.getUsername()); //获得response对象,向页面输出 HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/html;charset=UTF-8"); //判断 if(existUser != null){ //查询到该用户:用户名已经存在 response.getWriter().println("<font color='red'>用户名已经存在</font>"); }else{ //没查询到该用户:用户名可以使用 response.getWriter().println("<font color='green'>用户名已经存在</font>"); } return NONE; } /** * 用戶注册的方法: */ public String regist(){ return NONE; } } </span>
設定後、UserDao でクエリを完了する必要があります。具体的なコードは次のとおりです。
<span style="font-size:18px;"><!-- Service的配置 =========================== --> <bean id="userService" class="cn.itcast.shop.user.service.UserService"> <property name="userDao" ref="userDao"/> </bean> <!-- UserDao的配置 =========================== --> <bean id="userDao" class="cn.itcast.shop.user.dao.UserDao"> <property name="sessionFactory" ref="sessionFactory"></property> </bean> </span>
次に、サービス内で Dao への呼び出しを完了します。具体的なコードは次のとおりです:
<span style="font-size:18px;">package cn.itcast.shop.user.dao; import org.springframework.orm.hibernate3.support.HibernateDaoSupport; import java.util.List; import cn.itcast.shop.user.vo.User; /** * 用户模块持久层代码 * @author Flower * */ public class UserDao extends HibernateDaoSupport { //按名次查询是否有该用户 public User findByUsername (String username){ String hql ="from User where username= ?"; List <User> list=this.getHibernateTemplate().find(hql,username); if(list !=null && list.size() > 0){ return list.get(0); } return null; } } </span>
次に、UserAction でそれを呼び出す必要があります。具体的なコードは次のとおりです:
<span style="font-size:18px;">package cn.itcast.shop.user.service; import org.springframework.transaction.annotation.Transactional; import cn.itcast.shop.user.dao.UserDao; import cn.itcast.shop.user.vo.User; /** * 用户模块业务层代码 * @author Flower * */ @Transactional public class UserService { //注入UserDao private UserDao userDao; public void setUserDao(UserDao userDao){ this.userDao =userDao; } //按用户名查询用户的方法 public User findByUsername (String username){ return userDao.findByUsername(username); } } </span>
最後に、次のように書きます。マッピング ファイルの内容、具体的なコードは次のとおりです。
<span style="font-size:18px;">package cn.itcast.shop.user.action; import java.io.IOException; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import cn.itcast.shop.user.service.UserService; import cn.itcast.shop.user.vo.User; import com.opensymphony.xwork2.ActionSupport; import com.opensymphony.xwork2.ModelDriven; /** * 用户模块Action的类 * @author Flower * */ public class UserAction extends ActionSupport implements ModelDriven<User> { //模型驱动使用的对象 private User user = new User(); public User getModel(){ return user; } //注入UserService private UserService userService; public void setUserService(UserService userService){ this.userService=userService; } /** * 跳转到注册页面的执行方法 */ public String registPage(){ return "registPage"; } /** * ajax进行异步校验用户名的执行方法 * @throws IOException */ public String findByName() throws IOException{ //调用Service进行查询 User existUser = userService.findByUsername(user.getUsername()); //获得response对象,向页面输出 HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/html;charset=UTF-8"); //判断 if(existUser != null){ //查询到该用户:用户名已经存在 response.getWriter().println("<font color='red'>用户名已经存在</font>"); }else{ //没查询到该用户:用户名可以使用 response.getWriter().println("<font color='green'>用户名已经存在</font>"); } return NONE; } /** * 用戶注册的方法: */ public String regist(){ return NONE; } } </span>
applicationContext に同行することを忘れないでください。 具体的なコードは次のとおりです。
<span style="font-size:18px;"><?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd"> <hibernate-mapping> <class name="cn.itcast.shop.user.vo.User" table="user"> <id name="uid"> <generator class="native"/> </id> <property name="username"/> <property name="password"/> <property name="name"/> <property name="email"/> <property name="phone"/> <property name="addr"/> <property name="state"/> <property name="code"/> </class> </hibernate-mapping></span>
コードは終了します。レンダリングは次のとおりです:
上記は私があなたのためにまとめたものです。
以上がSSHオンラインモールはajaxを使用してユーザー名の非同期認証を完了しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。