`
chengyue2007
  • 浏览: 1491310 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

一个通用的ajax程序(实现像百度一样自动提示功能)

    博客分类:
  • ajax
阅读更多

1.jsp+javabean实现ajax

(1),<script type="text/javascript">
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
//表名ajax
function ajaxTable(){

    var table_name=document.validateRule01.table_name.value;
    if(table_name==""){
     document.getElementById("result_display").style.visibility='hidden';
    return;
    }
var X = new ActiveXObject("MSXML2.XMLHTTP.3.0");
   //var X = new XMLHttpRequest();
   if(X)
   {
   X.onreadystatechange=function(){
    if(X.readyState==4)
    {
     if(X.status==200)
     {
      var mobanhtml=X.responseText;
      mobanhtml=mobanhtml.trim();
     var tableNames = mobanhtml.split(",");
     var s = document.getElementById('result_display') ;
                s.innerHTML = '';  
                if(tableNames.length>0){
                document.getElementById('result_display').style.visibility='visible';
                for(i=0; i < tableNames.length ; i++) {  
                   var suggest = '<div onmouseover="onmouseOver(this);" ';  
                   suggest += 'onmouseout="onmousetOut(this);" ';  
                   suggest += 'onclick="setSuggestValue(this.innerHTML);" ';  
                   suggest += 'class="onmouset_out">' + tableNames[i] + '</div>';  
                   s.innerHTML += suggest;
                }  
                }
     }
     else
     {
      
       }
    }

   };
   
    X.open("POST","getTableName.jsp?table_name="+table_name,true);
    X.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    X.send();
   
   }
   else
   {
    alert("??");
   }
}
function onmouseOver(div) {  
         div.className = 'onmouse_over';  
      }  
      function onmousetOut(div) {  
         div.className = 'onmouset_out';  
      }  
      function setSuggestValue(value) {  
         document.validateRule01.table_name.value = value;  
         document.getElementById('result_display').innerHTML = '';
          document.getElementById("result_display").style.visibility='hidden';
      }    其中红色部分是要修改的部分,其他代码可以照搬

然后是促发这个ajax的text框代码:<input type='text' size='30' style="width:200px" id="txt" name='table_name' value='<%=InitBean.getTable_name()%>' onkeyup="ajaxTable();" >

在这个text框所在的table外面添加<div id="result_display" style="position:absolute; visibility:hidden; overflow:auto; top:70px; left:195px; width:200px; height:200px; background-color:#ffffff;">
           </div>

2.下面是getTableName.jsp的代码:

<%@ page contentType="text/html;charset=gb2312" %>
<%@ page language="java"
session="true"
         buffer="32kb"        
         autoFlush="true"        
%>

<%@ page import="
   com.hoperun.bi.quality.GetTableName,
   java.sql.Connection,
   java.sql.Statement,
   java.sql.ResultSet
   "
%>
<%--
response.setHeader("Cache-Control","no-cache"); //Forces caches to obtain a new copy of the page from the origin server
response.setHeader("Cache-Control","no-store"); //Directs caches not to store the page under any circumstance
response.setDateHeader("Expires", 0);           //Causes the proxy cache to see the page as "stale"
response.setHeader("Pragma","no-cache");        //HTTP 1.0 backward compatibility
--%>

<%
String table_name=request.getParameter("table_name");
GetTableName getTableName=new GetTableName();
String str=getTableName.getTableNames(table_name);

out.write(str);
%>

3.下面是GetTableName.java的bean代码:

/*
* com.hoperun.bi.beans.SqlEditorBean0101.java
*
* Created on 2006-5-22 14:16:59
*
* Version 1.0.0
*
* Copyright 2003-2005 by NanJing HopeRun(IT-FOREST) Information System Co., Ltd, CHINA and
*                        IT Forest Corporation
* All rights reserved.
*
* This software is the confidential and proprietary information of
* HopeRun(IT-FOREST) Information System Co., Ltd, CHINA and IT Forest Corporation.
* You shall not disclose such Confidential Information and shall use it only in
* accordance with the terms of the license agreement you entered into with
* HopeRun(IT-FOREST) Information System Co., Ltd, CHINA and IT Forest Corporation.
*/
package com.hoperun.bi.quality;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import com.webpump.sdk.datasource.DataSourceManager;

/**
* @author wei_yuhong
*
* 表格中文描述和字段描述定义画面Bean,选择数据源分别编辑
*/
public class GetTableName {

private Connection conn;
public GetTableName() throws SQLException{
   conn=DataSourceManager.findDataSource("").getConnection();
}
/**
* 执行添加、查询等动作的过程。
* @param objIn 保存有执行此操作所需的所有数据
* @param objOut 保存查询等操作的结果数据
*/
public String getTableNames(String table_name) throws SQLException {
   String str="";
   try{
    String sqlmodel = "select t.table_en_name from hpbi_tablestorage t where t.table_en_name like '"+table_name+"%' order by t.table_en_name";
    Statement pStmt = this.conn.createStatement();
    ResultSet rsmodel = pStmt.executeQuery(sqlmodel);
   
    while(rsmodel.next()){
     str+=rsmodel.getString("table_en_name")+",";
    }
   }catch(Exception e){
    System.out.print(e);
   }finally{
     try {
      if (conn!=null) {
        conn.close();
        conn = null;
      }
           } catch (Exception e) {
           }
   }
   return str;
}
}

这样就可以在输入框中输入表名的首字母,就可以自动提示所有以这个字母开头的表名

二.用struts2.0的实现:只要把X.open("POST","getTableName.jsp?table_name="+table_name,true);
中的。getTableName.jsp改成getTableName.action就ok了,还有就是下面的getTableName.action的代码:

package com.hoperun.action;


import java.io.PrintStream;
import java.util.HashMap;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.hoperun.service.GetCloseIdService;
import com.hoperun.service.SalesSearchService;
import com.opensymphony.xwork2.ActionSupport;


public class getCloseIdAction extends ActionSupport
{

    /** *//**
     *
     */
    private static final long serialVersionUID = 1L;
   
    /**//*
     */
    private GetCloseIdService getCloseIdService=new GetCloseIdService();
   
    private String clothesid="";
   
   

    public String getClothesid() {
   return clothesid;
}

public void setClothesid(String clothesid) {
   this.clothesid = clothesid;
}

@Override
    public void validate()
    {
    
    }
   
    @Override
    public String execute() throws Exception
    {
        HashMap<String,String> hmInput = new HashMap<String,String>();
       
        String reStr=getCloseIdService.getclothesIds(clothesid);
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/html;charset=GBK");//解决中文乱码
        PrintStream out = new PrintStream(response.getOutputStream());//获取out输出对象
        out.println(reStr);
        return null;//这里返回的是null
    }

}

注意这里action返回的是null,千万记住

分享到:
评论

相关推荐

    ajax仿百度搜索输入自动提示

    本项目是使用JSP技术实现的一个Ajax自动提示功能,其目的是模拟百度搜索引擎的搜索提示效果。 首先,我们需要理解Ajax(Asynchronous JavaScript and XML)的核心理念。Ajax并非一种新技术,而是通过JavaScript、...

    Ajax和Jquery实现谷歌百度搜索下来提示

    总的来说,这个项目结合了Ajax、jQuery和C#,利用Microsoft Visual Studio 2008作为开发工具,实现了类似谷歌和百度搜索框的下拉提示功能。通过Ajax技术,用户在输入搜索词时可以实时看到匹配的搜索建议,提升了用户...

    ajax+jquery实现类似百度搜索提示框

    本篇将详细讲解如何利用这两种技术来创建一个类似百度搜索框的实时提示功能,让用户在输入时能够实时看到相关的搜索建议。 ### 1. Ajax 基础 Ajax 是一种在不重新加载整个网页的情况下,更新部分网页内容的技术。...

    jsp+ajax实现输入框自动搜索

    本文将详细介绍如何使用jsp和ajax技术实现输入框自动搜索功能,类似于百度搜索。 一、标题:jsp+ajax实现输入框自动搜索 该标题表明该技术使用jsp和ajax实现输入框自动搜索功能。 二、描述:类似于百度的搜索一样...

    用Ajax技术实现的像百度那样功能的实例

    在本实例中,我们将探讨如何使用Ajax技术来创建类似百度的搜索功能,从而提升用户体验,实现快速、流畅的交互。 首先,理解Ajax的核心概念至关重要。它通过JavaScript向服务器发送异步请求,获取数据,然后在客户端...

    AJAX百度搜索自动提示效果+JQuery滑动效果

    总的来说,"AJAX百度搜索自动提示效果+JQuery滑动效果"是一个结合了高效数据交互和视觉呈现的前端应用实例,它展示了AJAX和jQuery如何协同工作,为现代网页带来更丰富的交互性和用户体验。通过理解和实践这样的项目...

    Ajax+JSON 搜索框自动完成提示功能

    标题 "Ajax+JSON 搜索框自动完成提示功能" 涉及的是网页开发中的一个常见技术,用于提高用户输入体验。Ajax(异步JavaScript和XML)是Web开发中的一种技术,它允许页面在不重新加载整个页面的情况下与服务器交换数据...

    ajax 自动提示ajax 自动提示含有下拉框

    标题中的“Ajax自动提示”指的是在网页中使用Ajax技术实现的一种动态输入提示功能。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术通常用于提升...

    AJAX实现百度谷歌搜索自动填充

    本篇文章将详细解析如何利用AJAX技术实现类似百度和谷歌搜索框的自动填充功能,以及如何使用ASP.NET AJAX库中的AutoCompleteExtender控件。 首先,AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个页面...

    ajax+mysql仿百度搜索智能提示功能

    本项目“ajax+mysql仿百度搜索智能提示功能”就是利用Ajax技术,结合MySQL数据库,实现了一个类似百度搜索的实时智能提示功能。下面将详细讲解其中涉及的关键知识点。 一、Ajax基础 Ajax的核心是JavaScript异步通信...

    用php+ajax写的仿百度谷歌搜索下拉自动提示框效果

    这个项目“用php+ajax写的仿百度谷歌搜索下拉自动提示框效果”旨在实现类似百度和谷歌搜索引擎的实时搜索建议功能。下面我们将详细探讨这个过程涉及的关键知识点。 首先,我们要理解**PHP**(Hypertext ...

    Asp.Net+Ajax控键实现搜索输入框智能提示功能源码

    在Asp.Net开发中,利用Ajax技术可以极大地提升用户体验,特别是在实现搜索输入框的智能提示功能时,Ajax的优势尤为明显。这个"WebSite2"压缩包文件提供的源码就是一个很好的例子,展示了如何将Asp.Net与Ajax控件结合...

    java实现输入条件自动提示

    本资源提供了一个完整的解决方案,用于实现输入条件自动提示的功能。该解决方案涵盖了准备工作、实例代码、逻辑处理类、SERVLET类和前台页面等多个方面,旨在帮助开发者快速实现输入条件自动提示的功能。

    AJAX+ASP实现输入框提示

    这个"AJAX+ASP实现输入框提示"的示例项目,旨在展示如何使用AJAX技术在ASP页面上创建一个智能提示系统,当用户在输入框中输入文字时,后台将实时搜索匹配的数据并显示为提示。这种功能在许多Web应用中非常常见,如...

    ajax实现的通用的自动完成功能

    在本案例中,我们将讨论如何利用Ajax来实现一个通用的自动补全功能,类似于Google搜索中的实时建议。 ### 1. 基本原理 自动补全功能的核心在于快速响应用户的输入,并提供相关的建议列表。Ajax通过JavaScript监听...

    ajax模拟百度自动下拉提示框

    本项目名为“ajax模拟百度自动下拉提示框”,其目的是实现一个与百度搜索类似的实时下拉提示功能,为用户提供便捷的模糊查询体验。这个功能广泛应用于各种搜索引擎和输入框,能大大提高用户在输入时的效率。下面将...

    ajax代码实现自动补全功能

    **Ajax技术实现自动补全功能** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在Web开发中,它极大地提升了用户体验,尤其是在实现搜索框的自动补全功能...

    自动补全 | 像百度那样的自动提示功能

    综上所述,构建一个像百度那样的自动补全功能,需要结合.NET框架、数据库操作、前端技术以及性能优化策略,以提供高效、流畅的用户体验。具体实现时,要根据实际项目需求,灵活运用各种技术和工具,确保系统的稳定性...

    ajax的小的实现,小程序

    对于初学者来说,这个小程序提供了一个很好的实践机会,可以学习到如何将前端的交互与后端的数据处理相结合,理解Ajax的工作流程,以及如何使用JavaScript操作DOM,实现动态更新页面的效果。同时,也可以锻炼CSS的...

    ajax实现输入框提示功能

    一个常见的提升用户体验的设计是实现输入框的智能提示功能,就像Google搜索框那样,当用户开始输入时,系统会根据已输入的字符动态地提供相关的建议或搜索结果。这种功能主要依赖于Ajax(异步JavaScript和XML)技术...

Global site tag (gtag.js) - Google Analytics