关闭

Ajax实现局部刷新和异步处理简单应用(实现简单注册验证)

标签: ajaxjquery异步mysql
472人阅读 评论(0) 收藏 举报
分类:
实现功能:
注册功能:前台一个表单,当向表单中写用户名时,能向数据库中查找是否存在这个用户,有的话用
ajax反馈“当前用户已存在”;没有的话反馈“恭喜您,此用户可用”


1.前台的jsp
ajax和jquery 部分
<script src="js/jquery.min.js"></script>
<script>

 function testUser(){
  //var form=$("#form").val();//获取user对象
  var user=$("#user").val();
  $.ajax({
   type:"GET",
   url:"/springJDBC/doUser",
   data:{username:user},
   success:function(msg){
    $("#show").html(msg);
   },
   beforeSend:function(){
    $("#show").html("正在验证,请稍后");
   }
   
   
  });
  
  
 }
</Script>

表单 部分
<body>
 用户名:<input type="text" id="user" onblur="testUser()">&nbsp <span id="show"></span></br>
</body>


(为/springJDBC/doUser)配置一下映射关系 部分

 <servlet>
    <description></description>
    <display-name>DoUser</display-name>
    <servlet-name>DoUser</servlet-name>
    <servlet-class>com.xwl.ajax.DoUser</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>DoUser</servlet-name>
    <url-pattern>/doUser</url-pattern>
  </servlet-mapping>

2.处理ajax传来的数据 部分
com.xwl.ajax.DoUser这个类
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  request.setCharacterEncoding("utf-8");
  response.setContentType("text/html; charset=utf-8");//设置反馈给浏览器的内容
  PrintWriter out=response.getWriter();
  String username=request.getParameter("username");
  try {
   Thread.sleep(3000);
  } catch (InterruptedException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  String path="applicationContext.xml";
  ApplicationContext ac=new ClassPathXmlApplicationContext(path);
  
  Studentdao studao=ac.getBean("studentdao",Studentdao.class);
  
  
  if(studao.find(username).getName()!=null){//传上来的user中有内容的话
   
   out.print("该用户已存在");
   
  }else{
   out.print("恭喜您,该账号可用");
  }
  out.flush();
  out.close();
 }


3.在配置文件ApplicationContext设置数据库连接 部分

<bean id="template" class="org.springframework.jdbc.core.JdbcTemplate">
   <!-- 注入连接信息 -->
   <property name="dataSource" ref="dbcp"></property>
 </bean>
  
 <bean id="dbcp" class="org.apache.commons.dbcp.BasicDataSource">
   <property name="username" value="root"></property>
   <property name="password" value="123456"></property>
   <property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
   <property name="url" value="jdbc:mysql://localhost:3306/student?useUnicode=true&amp;characterEncoding=utf8"></property>
   
 </bean>

4.//从数据库中查找相应字段并反馈给servlet 部分
@SuppressWarnings({ "unused", "null" })
 public User find(String name){
  List<Map<String,Object>> lists=new ArrayList<Map<String,Object>>();//存放执行完queryForList之后的对象
  if(jdbcTemplate!=null){//如果已经通过jdbcTemplate和连接池获取数据库的连接的话
   String sql="select * from user where name='"+name+"'";
   lists=jdbcTemplate.queryForList(sql);//执行sql语句返回一个存放查询到的数据库字段(以键值对的形式存放(字段:值))的集合
  }
  
     List<String> userlist=new ArrayList<String>();//存放由数据库传来的每一条字段(lists的每一个元素)
  System.out.println("通过Map.keySet遍历key和value:");
  if(lists!=null){//如果lists里面有值
   for(Map<String, Object> map:lists){//将lists里面的   map   中的值 传到userlist中
     for (String key : map.keySet()) {
      userlist.add(map.get(key).toString());//已经存放了这条信息的所有的字段的值了
        System.out.println("key= "+ key + " and value= " + map.get(key).toString());
       }
   }
  }
  
  User user=new User();
  if(userlist.size()>1){//如果userlist中有值,则把值分别的放入到user中,没有的话,什么也不做,传到处理前台的servlet中
   user.setName(userlist.get(0));
   user.setPassword(userlist.get(1));
   user.setRole(userlist.get(2));
   user.setId(Integer.parseInt(userlist.get(3)));
  }
  System.out.println(user.getName());
   
  return user;
   
  }
 


6.数据库建表 部分(注意先后顺序)

name varchar
password varchar
role varchar
id int
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5291次
    • 积分:109
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条
    文章存档