JSP+Ajax实现无刷新判断日志重复

  • A+
所属分类：Web前端

【JSP+Ajax实现无刷新判断日志重复或注册用户名是否重复】

Ajax

Ajax

JSP+Ajax技术实现无刷新查询数据库并进行相关提示，多用注册用户是否被占用或日志查重等。下面介绍一下我最近在做的一个程序所用到的日志查重功能。

logadd.jsp代码如下：

  1. <%@ page language="java" import="java.util.*,jform.Allclass" contentType="text/html;charset=gb2312"%>   
  2. <jsp:useBean id="log" class="jBean.InsertMessage" scope="page"/>   
  3. <html xmlns="http://www.w3.org/1999/xhtml">   
  4. <head>   
  5. <title>添加日志</title>   
  6. <link rel="stylesheet"  href="../css/main.css" type="text/css" />   
  7. <script type="text/javascript">   
  8.   function check_fir()   
  9. {   
  10.     if (document.log.log_title.value== "")   
  11.   {   
  12.     window.alert("请填写日志标题！");   
  13.     document.log.log_title.focus();   
  14.     return (false);   
  15.   }   
  16.     if (document.log.showmen.value== "")   
  17.   {   
  18.     window.alert("请填写日志作者！");   
  19.     document.log.showmen.focus();   
  20.     return (false);   
  21.   }   
  22.     if (document.log.content.value== "")   
  23.   {   
  24.     window.alert("请填写日志内容！");   
  25.     document.log.content.focus();   
  26.     return (false);   
  27.   }   
  28.     if (document.log.log_title.length>2000 || document.log.log_title.length<16)   
  29.   {   
  30.     window.alert("请填写您的用户名！");   
  31.     document.log.log_title.focus();   
  32.     return (false);   
  33.   }   
  34. }   
  35.    //创建XMLHttpRequest对象    
  36.  function GetO()    
  37.  {    
  38.    var ajax=false;    
  39.     try    
  40.     {    
  41.      ajax = new ActiveXObject("Msxml2.XMLHTTP");    
  42.     }    
  43.     catch (e)    
  44.     {    
  45.       try    
  46.       {    
  47.        ajax = new ActiveXObject("Microsoft.XMLHTTP");    
  48.       }    
  49.       catch (E)    
  50.       {    
  51.        ajax = false;    
  52.       }    
  53.     }    
  54.     if (!ajax && typeof XMLHttpRequest!='undefined')    
  55.     {    
  56.      ajax = new XMLHttpRequest();    
  57.     }    
  58.     return ajax;    
  59.  }    
  60.     
  61.  function getMyHTML(serverPage, objID) {    
  62.    var ajax = GetO();    
  63.     //得到了一个html元素，在下面给这个元素的属性赋值    
  64.  var obj = document.all[objID];    
  65.     //设置请求方法及目标，并且设置为异步提交    
  66.  ajax.open("post", serverPage, true);    
  67.  ajax.onreadystatechange = function()    
  68.  {    
  69.     if (ajax.readyState == 4 && ajax.status == 200)    
  70.     {    
  71.     //innerHTML是HTML元素的属性，如果您不理解属性那就理解为HTML元素的变量    
  72.     //ajax.responseText是服务器的返回值，把值赋给id=log_title_msg的元素的属性    
  73.     //innerHTML这个属性或说这个变量表示一组开始标记和结束标记之间的内容    
  74.      obj.innerHTML = ajax.responseText;    
  75.     }    
  76.    }    
  77.     //发送请求    
  78.  ajax.send(null);    
  79.    }    
  80.    function checkLogTitle()    
  81.    {    
  82.       getMyHTML("logrepeat.jsp?log_title="+document.getElementById("log_title").value, "log_title_msg");    
  83.    }    
  84.    //这个函数的作用是当用户的焦点从其他地方回到log_title这个输入框时再给属性赋回原内容    
  85.  function logTitleMsg(msg)    
  86.    {    
  87.     if(msg=='log_title_msg')    
  88.    {    
  89.       document.all[msg].innerHTML = "<div style='color:red;' align='left'>系统会自动判断日志标题是否重复，请关注此提示以避免发布重复文章。</div>";    
  90.      }    
  91.    }   
  92.   </script>   
  93. </head>   
  94. <body>   
  95. <form action="addlog.jsp" method="post" enctype="multipart/form-data" name="log" onSubmit="return check_fir()">   
  96. <table class="ta" width="600" border="0">   
  97.   <tr>   
  98.     <td width="522" height="189" valign="top"><table width="600" border="0">   
  99.      <tr>   
  100.         <td colspan="2" align="center"><strong>发表日志</strong></td>   
  101.         </tr>   
  102.       <tr>   
  103.         <td width="60" align="left">日志标题:</td>   
  104.         <td width="452" align="left"><input id="log_title" name="log_title" type="text"size="40" onBlur="javaScript:checkLogTitle();" onFocus="return logTitleMsg('log_title_msg');"  />   
  105.           <span id="log_title_msg" class="intro">*</span></td>   
  106.       </tr>   
  107.       <tr>   
  108.         <td align="left">日志分类:</td>   
  109.         <td align="left"><select name="class_name">   
  110.         <%   
  111.             Collection c=log.showLogClass();   
  112.             Iterator it=c.iterator();   
  113.             while(it.hasNext())   
  114.             {   
  115.                 Allclass log_class=(Allclass)it.next();   
  116.         %>   
  117.           <option value="<%=log_class.getClassname()%>"><%=log_class.getClassname()%></option>   
  118.         <%}%>   
  119.         </select>   
  120.           <span class="intro">*</span>        </td>   
  121.       </tr>   
  122.       <tr>   
  123.         <td align="left">发 布 人:</td>   
  124.         <td align="left"><input name="showmen" type="text" /></td>   
  125.       </tr>   
  126.       <tr>   
  127.         <td align="left">上传文件:</td>   
  128.         <td align="left"><input type="file" name="myfile" />   
  129.          </td>   
  130.       </tr>   
  131.       <tr>   
  132.         <td height="1" colspan="2" align="left" bgcolor="00759b"></td>   
  133.         </tr>   
  134.       <tr>   
  135.         <td colspan="2" align="left">日志内容:<span class="intro">(内容字数限制在2000字以内)</span></td>   
  136.         </tr>   
  137.       <tr>   
  138.         <td colspan="2" align="left" valign="top"><textarea class="content" rows="10" cols="50" name="log_content"></textarea></td>   
  139.       </tr>   
  140.       <tr>   
  141.         <td colspan="2" align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="Submit" type="submit"  value="发布日志">   
  142.           &nbsp;&nbsp;<input name="reset" type="reset" id="reset" value="清除重写"></td>   
  143.         </tr>   
  144.     </table></td>   
  145.   </tr>   
  146. </table>   
  147. </form>   
  148. </body>   
  149. </html>   
  150.   

查重前台处理页面logrepeat.jsp代码如下：

  1. <%@ page language="java" import="java.util.Date" contentType="text/html; charset=gb2312"%>   
  2. <jsp:directive.page import="com.jspsmart.upload.SmartUpload"/>   
  3. <jsp:useBean id="addlog" class="jform.Addlog" scope="request"/>   
  4. <jsp:useBean id="insert" class="jBean.InsertLog" scope="request"/>   
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  6. <html>   
  7.   <head>     
  8.     <title>日志上传</title>   
  9.   </head>   
  10.      
  11.   <body>   
  12.     <%   
  13.         String is=new String(request.getParameter("log_title").getBytes("ISO-8859-1"), "GBK");   
  14.         try{   
  15.         int isSave=insert.logRepeat(is);    
  16.         if (isSave==-1){   
  17.         out.println("<div style='color:red;' align='left'>日志重复！</div>");    
  18.         }   
  19.         }   
  20.         catch(Exception ee){out.println("系统出错");}   
  21.     %>   
  22.   </body>   
  23. </html>  

日志查重后台处理文件InsertLog.java代码如下：

  1. /*  
  2.      * 日志查重  
  3.      */  
  4.     int isSave=1;   
  5.     public int logRepeat(String log_title)   
  6.     {   
  7.         ResultSet rs=null;   
  8.         Statement stm=null;   
  9.         StringBuffer sb = new StringBuffer();   
  10.         //sb.append("select * from log_add where log_title = ").append("'");   
  11.         //sb.append("这是一个测试的日志3").append("'");   
  12.         String sq="select * from log_add where log_title = ?";    
  13.         //String sql="select * from log_add where log_title=";    
  14.         try{   
  15.             stm= dd.con.createStatement();   
  16.             pstm=dd.con.prepareStatement(sq);   
  17.             pstm.setString(1, log_title);   
  18.             rs=pstm.executeQuery();   
  19.             //rs=stm.executeQuery(sb.toString());   
  20.             //rs=stm.executeQuery(sq);   
  21.             //rs.next();   
  22.             if(rs.next())isSave=-1;   
  23.             //System.out.println(sb.toString());   
  24.             //System.out.println(log_title);   
  25.             //System.out.println(dd.con);   
  26.             }   
  27.             catch(Exception e){   
  28.                 System.out.print(e);   
  29.             }   
  30.             return isSave;   
  31.     }  

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: