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

最新推荐文章于 2023-04-26 13:44:28 发布

xuanxuan2134

最新推荐文章于 2023-04-26 13:44:28 发布

阅读量2.1k

点赞数 1

分类专栏：前端文章标签： ajax jquery 异步 mysql

本文链接：https://blog.csdn.net/xuanxuan2134/article/details/52381486

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现功能：
注册功能：前台一个表单，当向表单中写用户名时，能向数据库中查找是否存在这个用户，有的话用
ajax反馈“当前用户已存在”；没有的话反馈“恭喜您，此用户可用”

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

表单部分
<body>
用户名：<input type="text" id="user" οnblur="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设置数据库连接部分

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

xuanxuan2134

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现局部刷新和异步处理简单应用（实现简单注册验证）

实现功能：注册功能：前台一个表单，当向表单中写用户名时，能向数据库中查找是否存在这个用户，有的话用ajax反馈“当前用户已存在”；没有的话反馈“恭喜您，此用户可用”1.前台的jspajax和jquery 部分 function testUser(){ //var form=$("#form").val();//获取user对象 var u
复制链接

扫一扫