BlogJava-Bob-文章分类-ajaxhttp://www.blogjava.net/keweibo/category/26068.htmlAs long as you are there to lead me ,I won't lose my way zh-cnMon, 28 Dec 2009 15:08:27 GMTMon, 28 Dec 2009 15:08:27 GMT60jQuery+DWR動態編輯表格Scripthttp://www.blogjava.net/keweibo/articles/306929.htmlKEKETue, 22 Dec 2009 08:46:00 GMThttp://www.blogjava.net/keweibo/articles/306929.htmlhttp://www.blogjava.net/keweibo/comments/306929.htmlhttp://www.blogjava.net/keweibo/articles/306929.html#Feedback0http://www.blogjava.net/keweibo/comments/commentRss/306929.htmlhttp://www.blogjava.net/keweibo/services/trackbacks/306929.html     <script type="text/javascript" src="<%=root %>/dwr/engine.js"></script>
    <script type="text/javascript" src="<%=root %>/publicJS/jquery-1.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //edit table可編輯表格
            var numTD = $("#datatable tbody td.edit");//排除掉不能被修改的單元格
            numTD.dblclick(function(){
                var inputobj = $("<input type='text'>");//新建文本輸入框
                var tdobj = $(this);//被編輯的單元格
                var text = tdobj.html();
               
                inputobj.val(text);
                //important 一定要在插入文本框前進行判斷
                if(tdobj.children("input").length > 0){
                    return false;
                }
                tdobj.html("");
                inputobj.width(tdobj.width());
               
                inputobj.appendTo(tdobj);
                inputobj.trigger("focus").trigger("select");
                //阻止文本框的雙擊事件
                inputobj.click(function(){
                    return false;
                });
                //處理鍵盤事件
                inputobj.keyup(function(event){
                    //獲取當前按鍵的值
                    //jQuery的event對象上有一個which的屬性可以獲得鍵盤按鍵的鍵值
                    var keycode = event.which;
                    //處理回車的情況
                    if(keycode == 13){
                        //獲取當前文本框的內容
                        var inputtext = $(this).val();
                        //將td的內容修改成文本框珠內容
                        tdobj.html(inputtext);
                        var v_id = tdobj.parent().children().eq(1).html();
                        var column = tdobj.attr("id");
                       
                        if(column == "roleName"){
                            systemDaoAjax.updateRole({id : v_id,
                                            roleName : tdobj.parent().children("#roleName").html(),
                                            createUser : $("#hidden_username").val()
                                                }, null);
                        }else if(column == 'roleDesc'){
                            systemDaoAjax.updateRole({id : v_id,
                                            roleDesc : tdobj.parent().children("#roleDesc").html(),
                                            createUser : $("#hidden_username").val()
                                                }, null);
                        }
                    }
                    //處理ESC的情況
                    if(keycode == 27){
                        //將td中的內容原來為原先的值text
                        tdobj.html(text);
                    }
                });
                //文本框失去焦點事件,與ESC事件一樣
                inputobj.blur(function(){
                    //將td中的內容原來為原先的值text
                    tdobj.html(text);
                });
            });
        });
        function checkUserName(){
            var username = document.getElementById("username").value;
            if(!username==""){
                systemDaoAjax.validateUserName(username, function userNameCallback(data){
                    if(data){
                        document.getElementById("saveButton").disabled = false;
                        document.getElementById("feedBackMessage").style.display='none';
                        setCheckbox();//設置或者清空篩選框
                    }else{
                        document.getElementById("saveButton").disabled = true;
                        document.getElementById("feedBackMessage").style.display='block';
                    }
                });
            }
        }
        function setCheckbox(){
            var checkitem = document.getElementsByName("roleIdCheckbox")
            systemDaoAjax.getRoleByUserName(document.getElementById("username").value, function funcRoleCallback(roleArray){
                for(var i=0; i<checkitem.length; i++) {
                    checkitem[i].checked=false;
                    for(var j=0; j<roleArray.length; j++){
                        if(checkitem[i].value==roleArray[j])
                            checkitem[i].checked=true;                           
                    }
                }
            });
        }
        function saveUserRole(){
            var arrays = new Array();
            var items = document.getElementsByName("roleIdCheckbox")
            for(i=0; i<items.length; i++) {
                if(items[i].checked)
                    arrays.push(items[i].value);
            }
            if(arrays.length>0){
                systemDaoAjax.saveUserRole(document.getElementById("username").value, arrays, function saveUserRoleCallback(data){
                    if(data)
                        alert("操作成功!");
                    else
                        alert("注意:操作失敗!");
                });
            }else{
                alert("請選擇要授權的角色!");
            }
        }
    </script>


KE 2009-12-22 16:46 发表评论
]]>省份城市下拉列表(AjaxTags+hibernate+spring)http://www.blogjava.net/keweibo/articles/175916.htmlKEKEThu, 17 Jan 2008 06:03:00 GMThttp://www.blogjava.net/keweibo/articles/175916.htmlhttp://www.blogjava.net/keweibo/comments/175916.htmlhttp://www.blogjava.net/keweibo/articles/175916.html#Feedback0http://www.blogjava.net/keweibo/comments/commentRss/175916.htmlhttp://www.blogjava.net/keweibo/services/trackbacks/175916.htmlJSP页面(address.jsp ):
<%@ page language="java" contentType="text/html; charset=GBK"%>
<%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>
...
 <script type="text/javascript" src="../js/prototype-1.4.0.js"></script>
 <script type="text/javascript" src="../js/scriptaculous.js"></script>
 <script type="text/javascript" src="../js/overlibmws.js"></script>
 <script type="text/javascript" src="../js/ajaxtags.js"></script>
....
       <select id="country" name="address.country">
        <option value="">选择一个国家</option>
        <option value="中国">中国</option>

       <select id="province" name="address.province">
       <option value="">省份列表</option>
       </select>

       <select id="city" name="address.city">
       <option value="">城市列表</option>
       </select>
<ajax:select source="country"
          target="province"
          baseUrl="../area.do"
          parameters="areaName={country}"/>
      
 <ajax:select source="province"
          target="city"
          baseUrl="../area.do"
          parameters="areaName={province}"/>

AreaServlet.java

package dgut.ke.servlet;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.ajaxtags.helpers.AjaxXmlBuilder;
import org.ajaxtags.servlets.BaseAjaxServlet;
import org.springframework.web.context.support.WebApplicationContextUtils;

import dgut.ke.model.Area;
import dgut.ke.util.AreaUtil;

@SuppressWarnings("serial")
public class AreaServlet extends BaseAjaxServlet {

 @SuppressWarnings("unchecked")
 @Override
 public String getXmlContent(HttpServletRequest request,
   HttpServletResponse response) throws Exception {
  
  request.setCharacterEncoding("UTF-8");
  
  AreaUtil areaUtil = (AreaUtil) WebApplicationContextUtils
        .getRequiredWebApplicationContext(getServletContext())
        .getBean("areaUtil");
  String areaName = request.getParameter("areaName");
  //将areaName转换成areaCode
  String parentAreaCode = areaUtil.findAreaCodeByAreaName(areaName);
  
  if(parentAreaCode != null && ! parentAreaCode.equals("")) {
   
   List<Area> list = areaUtil.findByParentAreaCode(parentAreaCode);
   
   AjaxXmlBuilder builder = new AjaxXmlBuilder();
   
   for(Area area : list) {
    
    builder = builder.addItem(area.getAreaName(), area.getAreaName());
   }
   
   return builder.toString();
  } else {
   return null;
  }
  
 }

}

Servlet配置
<!-- 省份地址下拉列表 -->
  <servlet>
   <servlet-name>areaServlet</servlet-name>
   <servlet-class>dgut.ke.servlet.AreaServlet</servlet-class>
  </servlet>
  <servlet-mapping>
   <servlet-name>areaServlet</servlet-name>
   <url-pattern>/area.do</url-pattern>
  </servlet-mapping>

KE 2008-01-17 14:03 发表评论
]]>动态加载列表框http://www.blogjava.net/keweibo/articles/152642.htmlKEKESat, 13 Oct 2007 13:44:00 GMThttp://www.blogjava.net/keweibo/articles/152642.htmlhttp://www.blogjava.net/keweibo/comments/152642.htmlhttp://www.blogjava.net/keweibo/articles/152642.html#Feedback0http://www.blogjava.net/keweibo/comments/commentRss/152642.htmlhttp://www.blogjava.net/keweibo/services/trackbacks/152642.html<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>动态加载列表框</title>
  </head>
  <script type="text/javascript">
   var xmlHttp ;
   function createXMLHttpRequest() {
    if(window.ActiveXObject) {
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
    }else if(window.XMLHttpRequest) {
     xmlHttp = new XMLHttpRequest() ;
    }
   }
   
   function select_change() {
    var depart = document.getElementById("depart").value ;
    if(depart != null) {
     createXMLHttpRequest() ;
     var url = "dylist.jsp?depart="+depart ;
     xmlHttp.open("GET",url,true) ;
     xmlHttp.onreaddystatechange = showMembers ;
     xmlHttp.send(null) ;
    }
   }
   
   function showMembers() {
    if(xmlHttp.readyState ==4) {
     if(xmlHttp.status = 200) {
      var membersData = xmlHttp.responseXML.getElementByTagName("member") ;
      var membersSelect = document.getElementById("member") ;
      var option = null ;
      memberSelect.options.length = 0 ;
      //循环将数据插入列表框中
      for(var i=0 ;i<memberData.length;i++) {
       try {
        membersSelect.appendChild(option) ;
       }catch(e) {
        alert(e) ;
       }
      }
     }else {
      alert("您请求的页面有异常发生");
     }
    }else {
     //信息还没有返回,等待
    }
   }
  </script>
  <body>
    部分<br>
    <select id="depart" onchange="select_change()">
     <option value="null">选择</option>
     <option value="d1">部门一</option>
     <option value="d2">部门二</option>
     <option value="d3">部门三</option>
     <option value="d4">部门四</option>
    </select>
    <select id="member" multiple="multiple">
    </select>
  </body>
</html>


dylist.jsp 

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>动态加载列表框</title>
  </head>
  <body>
  <%
   String depart = request.getParameter("depart") ;
   if(depart == null) depart = "d1" ;
   StringBuffer sb = new StringBuffer() ;
   sb.append("<members>") ;
   Map map = new HashMap() ;
   String d1 = "<member><id>1001</id><name>成员一</name></member><member><id>1002</id><name>成员二</name></member>" ;
   String d2 = "<member><id>1003</id><name>成员三</name></member><member><id>1004</id><name>成员四</name></member>" ;
   String d3 = "<member><id>1005</id><name>成员五</name></member><member><id>1006</id><name>成员六</name></member>" ;
   String d4 = "<member><id>1007</id><name>成员七</name></member><member><id>1008</id><name>成员八</name></member>" ;
   map.put("d1",d1) ;
   map.put("d2",d2) ;
   map.put("d3",d3) ;
   map.put("d4",d4) ;
   sb.append(map.get(depart.toString())) ;
   sb.append("</members>") ;
   response.setContentType("text/xml") ;
   out.write(sb.toString()) ;
   %>
  </body>
</html>



KE 2007-10-13 21:44 发表评论
]]>简单的后台用户登录验证http://www.blogjava.net/keweibo/articles/152628.htmlKEKESat, 13 Oct 2007 13:06:00 GMThttp://www.blogjava.net/keweibo/articles/152628.htmlhttp://www.blogjava.net/keweibo/comments/152628.htmlhttp://www.blogjava.net/keweibo/articles/152628.html#Feedback0http://www.blogjava.net/keweibo/comments/commentRss/152628.htmlhttp://www.blogjava.net/keweibo/services/trackbacks/152628.html 后台验证是WEB应用中使用非常广泛的一种应用形式,常用于验证用户登录\后台数据校验等等.
login.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
    <!--
     var xmlHttp ;
     function createXMLHttpRequest(){
      if(window.ActiveXObject){
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
      }
      else if(window.XMLHttpRequest){
       xmlHttp = new XMLHttpRequest() ;
      }
     }
     function checkUser(){
      createXMLHttpRequest() ;
      var name = document.getElementById("username").value ;
      var password = document.getElementById("password").value ;
      var url = "login_check.jsp?username="+name+"&password="+password ;
      xmlHttp.open("GET",url,true) ;
      xmlHttp.onreadystatechange = showResult ;
      xmlHttp.send(null) ;
     }
     function showResult(){
      if(xmlHttp.readyState == 4){
       if(xmlHttp.status == 200){
        var result = xmlHttp.responseText;//在页面上显示返回的结果
        document.getElementById("checkResult").innerHTML="<b>"+result+"</b>" ;
       }
      }
     }
    //-->
    </script>
  </head>
  <body>
    ajax<br>
    用户名:<input type="text" id="username"><div id="checkResult"></div><p>
    密码:<input type="text" id="password" ><p>
    <input type="button" value="检查用户名" onclick="checkUser()"><p>
  </body>
</html>
login_check.jsp

<%@ page language="java" contentType="text/html; charset=GBK"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax</title>
  </head>
 
  <body>
    <%
     String name = request.getParameter("username") ;
     String password = request.getParameter("password") ;
     System.out.println("name--->"+name+" password---->"+password);
     if(name != null && password != null){
      if(name.equals("ajax") && password.equals("ajax")){
       out.write("<font color=red>恭喜你!此用户名可用</font>");
      }else{
       out.write("<font color=red>此用户名已被人占用</font>") ;
      }
     }
     %>
  </body>
</html>



KE 2007-10-13 21:06 发表评论
]]>INFO:Probably not an issue: org.jdom.Document is not available so the jdom converter will not load. This is only an problem if you wanted to use ithttp://www.blogjava.net/keweibo/articles/151118.htmlKEKEMon, 08 Oct 2007 09:49:00 GMThttp://www.blogjava.net/keweibo/articles/151118.htmlhttp://www.blogjava.net/keweibo/comments/151118.htmlhttp://www.blogjava.net/keweibo/articles/151118.html#Feedback0http://www.blogjava.net/keweibo/comments/commentRss/151118.htmlhttp://www.blogjava.net/keweibo/services/trackbacks/151118.html
启动TOMCAT时,控制台提示以下信息
INFO : Probably not an issue: org.jdom.Document is not available so the jdom converter will not load. This is only an problem if you wanted to use it
但操作没有问题了... ...

在网上搜了一下解决方法：
1) put the xalan.jar in the endorsed folder for tomcat
2) use the following jvm args: -Djavax.xml.transform.TransformerFactory=com.sun.org.apache.xalan.internal.xsltc.trax.TransformerFactoryImpl

KE 2007-10-08 17:49 发表评论
]]>dwr spring整合 http://www.blogjava.net/keweibo/articles/150826.htmlKEKESun, 07 Oct 2007 04:33:00 GMThttp://www.blogjava.net/keweibo/articles/150826.htmlhttp://www.blogjava.net/keweibo/comments/150826.htmlhttp://www.blogjava.net/keweibo/articles/150826.html#Feedback0http://www.blogjava.net/keweibo/comments/commentRss/150826.htmlhttp://www.blogjava.net/keweibo/services/trackbacks/150826.htmlAjax,它使浏览器可以为用户提供更为自然的浏览体验,对于j2EE WEB开发人员来说,使用DWR框架可以很简单的使用Ajax技术.
本文以一个DWR+SPRING的实例来说明DWR的使用
1、将dwr.jar放到应用的/WEB-INF/lib目录下
2、配置web.xml,增加如下代码:

  1. <!--初始化WebApplicationContext-->  
  2.  <context-param>  
  3.         <param-name>contextConfigLocation</param-name>  
  4.         <param-value>/WEB-INF/applicationContext.xml,/WEB-INF/action-servlet.xml</param-value>  
  5.  </context-param>  
  6.  <listener>  
  7.        <listener-class>  
  8.              org.springframework.web.context.ContextLoaderListener   
  9.        </listener-class>  
  10.  </listener>  
  11. <!--配置DWR拦截器-->  
  12.  <servlet>  
  13.   <servlet-name>dwr-invoker</servlet-name>  
  14. <!-- 指定DWR核心Servlet的实现类  -->
  15.   <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>  
  16.   <init-param>  
  17.    <param-name>debug</param-name>  
  18.    <param-value>true</param-value>  
  19.   </init-param>  
  20.  </servlet>  
  21.  <servlet-mapping>  
  22.   <servlet-name>dwr-invoker</servlet-name>  
  23.   <url-pattern>/dwr/*</url-pattern>  
  24.  </servlet-mapping>  

3、增中dwr.xml文件
文件内容：
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">  
  3. <dwr>  
  4.  <allow>  
  5.   <create creator="spring" javascript="DWRUser">  
  6.    <param name="beanName" value="DWRUser"/>  
  7.   </create>  
  8.  </allow>  
  9. </dwr>  

creator属性的值可以是new,struts,spring......因为此处是整合spring来做的，所以设置成“spring”，javascript="DWRUser" 表示实例转换成javascript语言后以DWRUser命名，前台页面可以通过代码（<script src="../../dwr/interface/DWRUser.js" type="text/javascript"></script>）来调用。param元素的name属性值可以是class,beanName等，此处用beanName,value得值是定义在applicationContext.xml中某个bean的id值。
4、创建一个实体bean供DWR转换成js

 

  1. package com.note.dwr;   
  2. import com.note.bussies.service.IUserService;   
  3. public class User {   
  4.  private IUserService ius;   
  5.     
  6.  public IUserService getIus() {   
  7.   return ius;   
  8.  }   
  9.  public void setIus(IUserService ius) {   
  10.   this.ius = ius;   
  11.  }   
  12.  public User(){   
  13.      
  14.  }   
  15.  public boolean isExist(String username) {   
  16.       Users user = this.ius.getUserByName(username);   
  17.       return (null == user) ? false : true;   
  18.  }   
  19. }  

5、在applicationContext.xml中配置第4步写的bean
  1. ......   
  2.  <bean id="DWRUser" class="com.note.dwr.User">  
  3.   <property name="ius">  
  4.    <ref bean="UserService" />  
  5.   </property>  
  6.  </bean>  
  7. ......  

6、在视图页面中调用
先导入以下文，每个文件的功能这里不再详述
  1. <script type='text/javascript' src='../../dwr/interface/DWRUser.js'></script>  
  2. <script type='text/javascript' src='../../dwr/engine.js'></script>  
  3. <script type='text/javascript' src='../../dwr/util.js'></script>  

因为我的视图文件是放在/view/user/下，所以这里用了../../返回到根
具体调用：

  1. <script type='text/javascript'>  

     function regUserChked(){   
  2.   var username=$("username").value;   
  3.   DWRUser.isExist(username,showData);//showData回调函数   
  4.  }   
  5.  function showData(data){   
  6.      if(data){   
  7.           DWRUtil.setValue("userMsg","该用户名已经被注册，请更换您的用户名！");   
  8.      }else{   
  9.           DWRUtil.setValue("userMsg","恭喜您，该用户名尚未被注册！");         
  10.      }   
  11.  }   
  12. </script>  
  13. input type="text" name="username" value="" onblur="regUserChked()" /><div id="userMsg"></div>  


KE 2007-10-07 12:33 发表评论
]]>一个简单的动态级联菜单http://www.blogjava.net/keweibo/articles/150238.htmlKEKEWed, 03 Oct 2007 02:10:00 GMThttp://www.blogjava.net/keweibo/articles/150238.htmlhttp://www.blogjava.net/keweibo/comments/150238.htmlhttp://www.blogjava.net/keweibo/articles/150238.html#Feedback0http://www.blogjava.net/keweibo/comments/commentRss/150238.htmlhttp://www.blogjava.net/keweibo/services/trackbacks/150238.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        function showSubMenu(obj)
        {
            var currentSort = document.getElementById(obj) ;
            currentSort.parentNode.style.display = "" ;
            var subMenu ;
            if(currentSort.id = "IBM" )
            {
                subMenu = "&nbsp;&nbsp;IBM-T43" ;
            }
            else if (currentSort.id = "SONY" )
            {
                subMenu = "&nbsp;&nbsp;SONY-888" ;
            }
            currentSort.innerHTML = subMenu ;
        }
    </script>
  </head>
 
  <body>
    <table style="BORDER-COLLAPSE: collapse" bordercolor="#111111"
        cellspacing="0" cellpadding="0" width="200" bgcolor="#f4efe7" >
        <tr>
            <td align="center" height="4">
                <b>笔记本品牌</b>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#" onclick="showSubMenu('IBM')">IBM</a>
            </td>
        </tr>
        <tr style="display:none">
            <td id="IBM">
               
            </td>
        </tr>
        <tr>
            <td>
                <a href="#" onclick="showSubMenu('SONY')">SONY</a>
            </td>
        </tr>
        <tr style="display:none">
            <td id="SONY">
               
            </td>
        </tr>
    </table>
  </body>
</html>
在该页面中,当用户单击主菜单中的选项时,将调用showSubMenu("XXX")函数,
在该函数中将首先获取所选择的项的标志信息,然后依据取到的信息进行逻辑
判断,构造子菜单对应的信息,最终使用innerHTML属性显示对应的内空.



KE 2007-10-03 10:10 发表评论
]]>