论坛首页 → Web前端技术论坛 →

用 ajax + json + dojo + mysql 登陆以及查询界面

浏览 6103 次
锁定老帖子 主题：用 ajax + json + dojo + mysql 登陆以及查询界面
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • zjh0588
  • 等级: 初级会员
  • 性别:
  • 文章: 13
  • 积分: 40
  • 来自: 广州
   发表时间：2007-08-15  

第一步: 建立mysql 数据库,创建noteuser表和增加1条信息

sql 代码
  1. CREATE TABLE `noteuser` (   
  2.   `userid` int(5) NOT NULL auto_increment,   
  3.   `username` varchar(16) character set utf8 default NULL,   
  4.   `password` varchar(16) character set utf8 default NULL,   
  5.   `regtime` datetime default NULL,   
  6.   `NickName` varchar(16) character set utf8 default NULL,   
  7.   `Sex` int(1) unsigned default NULL,   
  8.   `Email` varchar(15) character set utf8 default NULL,   
  9.   `age` int(2) unsigned default NULL,   
  10.   PRIMARY KEY  (`userid`)   
  11. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;   
  12.   
  13.   
  14. INSERT INTO noteuser(username,password,regtime,NickName,Sex,Email,age) VALUES ('YuKy','11',now(),'Zoo.YuKy',1,'zjh588@gmail.com',21);  

第二步:1.下载DOJO:http://dojotoolkit.org/downloads 我用的是dojo-0.4.3-ajax

           2.下载jsonrpc.js和jsonrpc-1.0.jar,http://oss.metaparadigm.com/jsonrpc-dist/json-rpc-java-1.0.zip

         3.在C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\ 建立新文件夹dojo_doc,把dojo-0.4.3-ajax解压到dojo文件夹内,然后把json-rpc-java-1.0.zip里的jsonrpc.js放在...\webapps\dojo_doc\js的文件夹里面.在js文件夹里增加clock.js,contentpane.js和aa.js.(其实clock.js和contentpane.js就是dojo-0.4.3-ajax里面的\demos\gfx\clock.html和\tests\test_docs.html的例子)

     把clock.html和test_docs.html的javascript(从dojo.require("");这里开始到)部分保存在clock.js和contentpane.js里面.
     记得把..\demos\gfx\下的\images\时钟图片也复制到..\webapps\dojo_doc\里.

//--把下面的代码复制到aa.js

js 代码
  1. function clrscr()   
  2. {   
  3.     resultNode.value = "";   
  4. }   
  5.   
  6. function print(s)   
  7. {   
  8.     resultNode.value += "" + s;   
  9.     resultNode.scrollTop = resultNode.scrollHeight;   
  10. }   
  11.   
  12.   
  13. function onLoad()   
  14. {   
  15.     resultNode = document.getElementById("result");   
  16.   
  17.     try {   
  18.     jsonrpc = new JSONRpcClient("JSON-RPC");   
  19.     } catch(e) {   
  20.     if(e.message) alert(e.message);   
  21.     else alert(e);   
  22.     }   
  23. }   
  24.   
  25. function loginUser(){   
  26.     var user = document.getElementById("username").value;   
  27.     var pass = document.getElementById("password").value;   
  28.   
  29.     if(user == null || pass == null ||user == "" || pass == ""){   
  30.         alert("Please enter username and password!");   
  31.         }else{   
  32.             var ss = jsonrpc.user.loginUser(user,pass);   
  33.             alert(ss);   
  34.             }   
  35.     }   
  36.        
  37. function dogetUserInfo(){   
  38.     clrscr();   
  39.      print("Running user\n\n");   
  40.       try {   
  41.             print("user.getUserInfo()");   
  42.             print(" returns " + jsonrpc.user.getUserInfo() + "\n");   
  43.           } catch(e) {   
  44.     print(" Exception: \n\n" + e);   
  45.     }   
  46.     }  

第三步:编写JAVA程序,jsonTest.java

java 代码
  1. package com.metaparadigm.jsonrpc.test;   
  2.   
  3. import java.io.Serializable;   
  4. import java.sql.*;   
  5.   
  6. public class jsonTest implements Serializable   
  7. {   
  8.     private final static long serialVersionUID = 1;   
  9.     private String strSql;   
  10.     private ResultSet rs;   
  11.     private Statement stmt = null;   
  12.     private Connection conn = null;   
  13.        
  14.     public Connection getConnection(){   
  15.         try{   
  16.             Class.forName("org.gjt.mm.mysql.Driver");   
  17.             conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8","root","root");   
  18.         }catch(Exception ex){   
  19.             ex.printStackTrace();   
  20.         }   
  21.         return conn;   
  22.     }   
  23.      public String loginUser(String name,String pass){   
  24.             String flag = "登陆失败";   
  25.             try{   
  26.                 strSql = "select * from noteuser where username like '"+name+"'and password like '"+pass+"'";   
  27.                 conn = getConnection();   
  28.                 stmt = conn.createStatement();   
  29.                 rs = stmt.executeQuery(strSql);   
  30.                 if(rs.next()){   
  31.                     flag = "登陆成功";   
  32.                 }   
  33.             }catch(Exception e){   
  34.                 flag = "登陆出现异常";   
  35.                 e.printStackTrace();   
  36.             }finally{   
  37.                 try{   
  38.                 conn.close();   
  39.                 stmt.close();   
  40.                 rs.close();   
  41.                 }catch(Exception e){}   
  42.                    
  43.             }   
  44.             return flag;   
  45.         }   
  46.            
  47.         public String[] getUserInfo(){   
  48.         String[] row = null;   
  49.         try{   
  50.             strSql = "select username from noteuser";   
  51.             conn = getConnection();   
  52.             stmt = conn.createStatement();   
  53.             rs = stmt.executeQuery(strSql);   
  54.             int i = 0;             
  55.             while(rs.next()){   
  56.                 i++;   
  57.             }   
  58.             System.out.println(i);   
  59.             rs = stmt.executeQuery(strSql);   
  60.             row = new String[i];   
  61.             i =0;    
  62.                
  63.             while(rs.next()){      
  64.                 row[i] = rs.getString(1);   
  65.                 i++;   
  66.             }   
  67.         }catch(Exception e){   
  68.             e.printStackTrace();   
  69.         }   
  70.         for(int j=0; j<row.length; j++)   
  71.             System.out.println(row[j]);   
  72.            
  73.         return row;   
  74.     }   
  75. }  

第四步: 写JSP页面:aa.jsp

xml 代码
  1. <%@   
  2. page contentType="text/html; charset=UTF-8" %><%@   
  3. page language="java" %><%@   
  4. page import="com.metaparadigm.jsonrpc.test.jsonTest"  
  5. %>  
  6. <jsp:useBean id="JSONRPCBridge" scope="session" class="com.metaparadigm.jsonrpc.JSONRPCBridge" />  
  7. <jsp:useBean id="user" scope="session" class="com.metaparadigm.jsonrpc.test.jsonTest"/>  
  8. <%JSONRPCBridge.registerObject("user", user); %>  
  9.   
  10. <script language="javascript" type="text/javascript">  
  11.         djConfig = {   
  12.             debugAtAllCosts: true;    
  13.             isDebug: true;   
  14.             dojoIframeHistoryUrl: "dojo-0.4.3-ajax/iframe_history.html";   
  15.             preventBackButtonFix: false    
  16.             };   
  17.         </script>  
  18.         <script language="javascript" type="text/javascript" src="dojo-0.4.3-ajax/dojo.js"></script>  
  19.         <script type="text/javascript" src="js/clock.js"></script>  
  20.         <script type="text/javascript" src="js/contentpane.js"></script>  
  21.         <script language="javascript" type="text/javascript" src="js/jsonrpc.js"></script>  
  22.         <script type="text/javascript" src="js/aa.js"></script>  
  23.            
  24. <html>  
  25.     <head>     
  26. <title>留言版-DOJO</title>  
  27. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />          
  28. </head>  
  29.   
  30. <body bgcolor="#ffffff" onLoad="onLoad()">  
  31.   
  32.   
  33.         <div dojoType="tabcontainer" style="width: 100%; height: 30em">  
  34.             <div dojoType="contentpane" label="用户登陆">  
  35.              <div dojoType="FloatingPane" class="stockPane" title="用户登陆框" id="pane"    
  36.                                  constrainToContainer="true" displayMaximizeAction="true">  
  37.                     <p>请输入你的用户名字和密码</p>  
  38.                     <p>用户名:   
  39.                       <input type="text" id="username">  
  40.                   </p>  
  41.                     <p>密 &nbsp; 码:    
  42.                       <input type="password" id="password" >  
  43.                   </p>  
  44.                     <p>  
  45.                       <input type="button" onClick="loginUser()" value="登陆" ></p>  
  46.                     <p>  </p>  
  47.               </div>  
  48.             </div>         
  49.            
  50.            
  51.         <div dojoType="contentpane" label=" 时 钟 ">             
  52.         <div id="gfx_holder" style="width: 385px; height: 385px;"><p>现在时间是: <span id="time"></span>.</p>  
  53.         <p>  
  54.           <button id="reset">恢复时间</button>  
  55.         </p>  
  56.         </div>  
  57.         </div>  
  58.                    
  59.         <div dojoType="contentpane" label="用 户 信 息">       
  60.         <div dojoType="FloatingPane" class="stockPane" title="Stock Form" id="pane" constrainToContainer="true" displayMaximizeAction="true">  
  61.        <h2>浏览信息</h2>  
  62.         <textarea wrap="off" id="result" cols="80" rows="20"></textarea>  
  63.        <a href="javascript:dogetUserInfo();">查看</a>  
  64.         </div>  
  65.         </div>  
  66.            
  67.         </div>  
  68.            
  69.     </body>  
  70.        
  71. </html>  

第五步:配置WEB-INF(自己创建以下的文件夹,在这里不一一说明有什么作用)
      1.添加web.xml,在..\webapps\dojo_doc\WEB-INF文件夹,在\WEB-INF\添加web.xml,把以下代码复制进去

xml 代码
  1. <?xml version="1.0" encoding="ISO-8859-1"?>    
  2. <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">  
  3. <web-app>  
  4. <servlet>    
  5. <servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name>    
  6. <servlet-class>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-class>    
  7. </servlet>    
  8. <servlet-mapping>    
  9. <servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name>    
  10. <url-pattern>/JSON-RPC</url-pattern>    
  11. </servlet-mapping>  
  12. </web-app>  

 

       2.添加jsonrpc-1.0.jar,把json-rpc-java-1.0.zip内的jsonrpc-1.0.jar复制到..\webapps\dojo_doc\WEB-INF\lib\里

      3.添加jsonTest.class,把jsonTest.java编译好的class文件在..\webapps\dojo_doc\WEB-

INF\classes\com\metaparadigm\jsonrpc\test\文件夹里.


第六步:测试,运行Tomcat,在地址栏输入http://localhost:8080/dojo_doc/aa.jsp,然后输入用户名yuky,密码11,看是否能登陆成功.


   我用了暑假实习时间(1个月)学习WEB编程,在实习前我只会JBDC+JSP简单连接数据库(分页都不会),在实习期间第1个星期--学习熟悉JSP+HTML环境,第2个星期--用Bean对象写了简单的留言版,第3个星期--学习AJAX+XML,第4个星期--就是现在的例子. 

    在这里说一下我学习心得,可以说我完全是个新手,因为我大学专业学的多半是C++,对于JAVA很少了解, 7月份才认真学起JAVA相关领域的编程.

    在我第三个星期的时候,实现了AJAX+XML,确实很高兴,因为抹去了JavaBean+HTML的每次刷新页面的工作,后来我发现AJAX+XML的web.xml配置很麻烦,和JAVA文件都要返回DOM节点,不然浏览页面就没办法识别,而且有时候AJAX+XML返回的数据不准确,会少1-2条数据,还有中文乱码的问题.可能是我学艺不精,写的程序不好才导致这些问题出现.

    在我第4个星期,就是现在,我用JSON实现了AJAX+XML的功能,它简单,易懂,这是后来才发现的,在我还没学会JSON的时候,在网络兜了很多大圈,因为每个网站说的内容都不一样,记得有个网站把JSON和XMLHttpRequest结合起来,我看了之后觉得,如果这样做那么跟AJAX+XML有何区别?直到我把json-rpc-java-1.0.zip内的jsonrpc-1.0.war解压出来,看完里面的hello.jsp的例子,我完全明白JSON的作用,它真的好用,当你真正发掘到jsonrpc-1.0.jar的作用,你就真正掌握了JSON,我在这里只是借花敬佛,希望每个初学JSON的人都找到一条最简单的路,不要向我这样,兜了那么大圈才知道答案已经出来了,只是自己发现太迟,像个盲头苍蝇到处乱撞!

     好吧!就写到这里,有哪里不懂可以留言大家互相讨论学习,,哪里说得不对,哪里写得不好,请大家指教.

  • dojo_doc.rar (4.2 MB)
  • 描述: 用 ajax + json + dojo + mysql 登陆以及查询界面代码
  • 下载次数: 727
返回顶楼
         
  • liuqiang
  • 等级: 二钻会员
  • 性别:
  • 文章: 856
  • 积分: 1350
  • 来自: 华东
   发表时间：2007-10-26  
I sill think it is too simple , though I am a beginner.
but I enjoy your curiousness!
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics