A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 段光宇 中级黑马   /  2013-12-31 22:28  /  1200 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 段光宇 于 2013-12-31 22:35 编辑

这两天一直在研究jsp中ajax技术,所谓ajax在jsp中主要应用就是在不刷新当前页面的情况下,后台与服务器进行交互从而刷新当前页面的部分内容,使得网页操作更加快捷美观,更大大减小了网络资源的占用。
下面实现了ajax最基础的应用,注册页面在不刷新的情况下判断用户输入的用户名是否已存在。
基本截图:
输入用户名前:


输入用户名后:
ajax自动将输入数据与服务器进行异步交互,在不刷新页面的情况下,显示出了用户名的占用情况。



实现核心代码:
表单部分:
在输入框属性中定义失去焦点时触发js检查用户名函数。
  1. <tr>
  2. <td width="20%" height="35">用户名:<br /></td>
  3. <td width="88%"><input name="textusername" id="inputusername" onBlur="javaScript:CheckName();" type="text" size="30" />
  4. <font size='-1' color="red">*(用户名位数不得少于6位)</font> <input type="button" name="Button" value="检测用户" onClick="checkname('Checkusername.jsp')"><div id="passport1" style="color: red"></div> </td>
  5. </tr>
复制代码


js部分:
  1. function GetO() {
  2. var ajax=false;
  3. try {
  4. ajax = new ActiveXObject("Msxml2.XMLHTTP");
  5. }
  6. catch (e) {
  7. try {
  8. ajax = new ActiveXObject("Microsoft.XMLHTTP");
  9. }
  10. catch (E) {
  11. ajax = false;
  12. }
  13. }
  14. if (!ajax && typeof XMLHttpRequest!='undefined') {
  15. ajax = new XMLHttpRequest();
  16. }
  17. return ajax;
  18. }
  19. function getMyHTML(serverPage, objID) {
  20. var ajax = GetO();
  21. //得到了一个html元素,在下面给这个元素的属性赋值
  22. var obj = document.all[objID];
  23. //设置请求方法及目标,并且设置为异步提交
  24. ajax.open("post", serverPage, true);
  25. ajax.onreadystatechange = function() {
  26. if (ajax.readyState == 4 && ajax.status == 200) {
  27. //innerHTML是HTML元素的属性,如果您不理解属性那就理解为HTML元素的变量
  28. //ajax.responseText是服务器的返回值,把值赋给id=passport1的元素的属性
  29. //innerHTML这个属性或说这个变量表示一组开始标记和结束标记之间的内容
  30. obj.innerHTML = ajax.responseText;
  31. }
  32. }
  33. //发送请求
  34. ajax.send(null);
  35. }
  36. function CheckName() {
  37. var username=regform.textusername.value;
  38. if(username==""){
  39. alert('没有输入用户名!');
  40. return false;
  41. }
  42. if(username.length < 5){
  43. alert("用户名过短!请重新输入用户名!");
  44. return false;
  45. }
  46. getMyHTML("checkusername1.jsp?username="+username, "passport1");
  47. }
复制代码
jsp判断用户名部分:




  1. <p> </p><p><%@ page contentType="text/html;charset=GBK"%>
  2. <%@page import="java.sql.*"%>
  3. <html>
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
  6.     <title>checkUser</title>
  7. </head>
  8. <body>
  9. <%
  10.         //request.setCharacterEncoding("GBK");//解决request识别中文为乱码
  11. String username=request.getParameter("username");
  12.         // 定义数据库用变量
  13. Connection conn = null;
  14.         Statement stmt = null;
  15.         ResultSet rs;
  16.         // 连接数据库
  17. Class.forName("com.mysql.jdbc.Driver");
  18.         conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bluerainbbs", "root", "root");
  19.         // 保存数据
  20. stmt = conn.createStatement();
  21.         rs = stmt.executeQuery("select * from bluerain_user where user_name='"+username+"'");
  22.         if(rs.next())
  23.         {
  24.                 out.println("用户名已经存在!");
  25.         }
  26. else
  27.         {
  28.                 out.println("用户名可以使用!");
  29.         }
  30. %>
  31. </body>
  32. </html></p><p>
  33. </p>
复制代码

评分

参与人数 1技术分 +1 收起 理由
乔兵 + 1

查看全部评分

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马