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

原创 2016年08月31日 08:41:34
实现功能:
注册功能:前台一个表单,当向表单中写用户名时,能向数据库中查找是否存在这个用户,有的话用
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

JavaWeb注册并把数据存入数据库

注册信息并把信息存入数据库,本人用到的软件如下; 1.mysql数据库     2.myeclipse     3.界面化sqlyou 首先创建这几个包和类,还有jsp页面        包和类如下:...
  • Yejie_
  • Yejie_
  • 2016年01月16日 23:11
  • 7308

动态生成能够局部刷新的验证码【AJAX技术】---看了不懂赔你钱

在开发JavaWeb应用时,动态生成验证码是一项必须的功能,在这里我们将会详细的讲解如何实现这一功能。...

实现带有验证码的ajax局部刷新登录界面

现在的登录界面大多数都带有:验证码的功能+验证码局部刷新+ajax登录。用ajax登录的好处最明显就是速度快,URL地址没有变化。所有现在登录功能很少再用form表单post提交了,大多数都已经采用了...

jQuery Ajax异步刷新局部页面

$("#waitWork").click(function(){ var url = "请求地址"; var data = {type:1}; $.ajax({ type : "ge...

AJAX的原理-如何做到异步和局部刷新

Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新。那么XMLHttpRequest的onReadyStateChang...
  • fyxxq
  • fyxxq
  • 2014年03月26日 23:19
  • 32427

两种定时刷新局部页面的方法--采用异步流程

一、采用jQuery的ajax方法 function reloadView(){ $.ajax({ url:'${oneway}/...

jquery的几种异步请求,ajax

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是...
  • a5489888
  • a5489888
  • 2013年01月21日 00:55
  • 99475

jquery实现注册时异步检测用户名是否存在

双休在宿舍,把以前下载的一些教程翻来看看,代码都很简单,适合入门的朋友,而我只是在这里做个记录,分享给大家! 第一步:放置一个Textbox控件,写上onBlur事件,在VS中可能会提示这个...

JS AJAX实现页面局部刷新~~~~

http://apps.hi.baidu.com/share/detail/34363149 AJAX大家耳濡目染,它是个非常强大的东西。今天我就在这里写一些比较实在的东西,希望能够帮助到一些人...

(局部刷新)jquery.ajax提交并实现单个div刷新

web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax实现局部刷新和异步处理简单应用(实现简单注册验证)
举报原因:
原因补充:

(最多只允许输入30个字)