`

无刷新提示框-ajax

 
阅读更多 
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import java.util.*;


public class search extends HttpServlet {

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=gbk");
		PrintWriter out = response.getWriter();
		String str=request.getParameter("search");
		Connection conn=null;
		Statement st=null;
		ResultSet rs=null;
		List<String> strList=new ArrayList<String>();
		try {
			if(str!=null&str.length()>0){
				Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
				String url="jdbc:sqlserver://localhost:1433;databaseName=test";
				conn=DriverManager.getConnection(url,"sa","sasa");
				st=conn.createStatement();
				String sql="select distinct(temp) from ta where temp like '"+str+"%' order by temp";
				rs=st.executeQuery(sql);
				while(rs.next())
				{
					strList.add(rs.getString("temp"));
				}
				StringBuffer sbu=new StringBuffer();
				int size=strList.size();
				for(int i=0;i<size;i++)
				{
					sbu.append(strList.get(i)+"-");
				}
				out.print(sbu.toString());
				out.flush();
				
			}
		} catch (Exception e) {
			// TODO: handle exception
		}
		
		
	
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
		doGet(request,response);
	}

}
  
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title> ajax无刷新提示 </title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css" >
		body{font:11px arial;}
		.suggest_link{
			background-color:#ffffff;
			padding:2px 6px 2px 6px;
			text-decoration:none;
		}
		.suggest_link_over{
			background-color:#e8f2fe;
			padding:2px 6px 2px 6px;
			text-decoration:none;
		}
		#suggest{
			position:absulute;
			background-color:#ffffff;
			text-align:left;
			border:1px solid #000000;
			display:none;
		}
	a{text-decoration:none;color:black;}
	</style>
	<script type="text/javascript">
	var xmlhttp;
	//创建xmlhttp对象并提交请求数据
	function searchSuggest()
	{
		try{
			xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
			}catch(e){
				try{
					xmlhttp=new XMLHttpRequest();
					if(xmlhttp.overrideMimeType)
					{
						xmlhttp.overrideMimeType("text/xml");
					}
				}catch(e){
					alert("找不到匹配");
				}
			}
	    }
	    xmlhttp.onreadystatechange=processRequest;
	    var str=document.getElementById("txtsearch").value;
	    xmlhttp.open("GET","search?search="+str,true);
	    xmlhttp.send(null);
	}
	//给String对象添加取出左右空格方法
	String.prototype.trim=function(){
		var m=this.match(/^\s*(\S+(\s+\S+)*)\s*$/);
		return (m==null)?"":m[1];
	}
	//对返回的数据进行处理
	function processRequest()
	{
		if(xmlhttp.readyState==4)
		{
			if(xmlhttp.status==200)
			{
				var sobj=document.getElementById("suggest");
				sobj.innerHTML="";
				//得到返回的数据
				var str=xmlhttp.responseText.split("-");
				var suggest=""; 
				if(str.length>0&&str[0].length>0)
				{
					for(var i=0;i<str.length;i++)
					{
						suggest+="<div onmouseover='javascript:suggestOver(this);'"
						suggest+=" id='div"+(i+1)+"'";
						suggest+=" onmouseout='javascript:suggestOut(this);'"
						suggest+=" style='cursor:hand;' onclick='pw(this.innerHTML);'";
						suggest+=" class='suggest_link'>"+str[i]+"</div>";
					}
					sobj.innerHTML=suggest;
					document.getElementById("suggest").style.display="block";
				}else{
					document.getElementById("suggest").style.display="none";
				}
			}
		}
	}
	//添加样式表
	function suggestOver(obj)
	{
		obj.className="suggest_link_over";
	}
	//添加样式表
	function suggestOut(obj)
	{
		obj.className="suggest_link";
	}
	//获取数据
	function pw(obj)
	{
		var strs=obj;
		document.getElementById("txtsearch").value=strs;
		document.getElementById("suggest").style.display="none";
	}
	//搜索文本框失去焦点时候获取焦点
	function searchs()
	{
		document.getElementById("txtsearch").focus();
	}
	//加载的时候让搜索文本框获得焦点
	function load()
	{
		searchs();
	}
	window.onload=load;
	</script>
  </head>
  
  <body>
    <h3>Ajax实现搜索提示</h3>
    <div style="width:500px">
    	<form method="post" action="" id="formsearch">
    		<input type="text" onblur="searchs()" id="txtsearch" name="txtSearch" onkeyup="searchSuggest()"  />
    		<input type="submit" id="cmdSearch" name="cmdSearch" value="搜索" />
    		<div id="suggest" style="width:200px;"></div>
    	</form>
    </div>
  </body>
</html>
  
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>search</servlet-name>
    <servlet-class>servlet.search</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>search</servlet-name>
    <url-pattern>/search</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
 

 

分享到：
| 无刷新提示框-dwr版
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    无刷新提示框-dwr版

    无刷新提示框是一种提高用户体验的技术，它允许网页在不重新加载整个页面的情况下更新部分内容。DWR（Direct Web Remoting）是一个开源Java框架，专门用于实现这种无刷新交互。DWR使得JavaScript和Java服务器端之间...

    ssm_ajaxsubmit-ajax提交-模态对话框-ajax上传文件

    Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下更新部分网页的技术。在SSM框架中，Ajax常用于提高用户体验，因为它可以实现后台数据的异步处理，避免页面跳转，使用户界面保持活跃。通常...

    通过Ajax无刷新读写操作

    在这个Jquery的Ajax示例中，我们关注的是对三种常见控件的无刷新操作：文本框、下拉框和勾选框。这些控件是网页交互中的基本元素，通过Ajax，我们可以实现以下功能： 1. **文本框**：用户在文本框中输入信息，点击...

    源代码-ajax 无刷新股票查询程序.zip

    【标题】"源代码-ajax 无刷新股票查询程序.zip" 提供的是一个使用 AJAX 技术实现的无刷新股票查询程序。此程序的核心是利用 AJAX（Asynchronous JavaScript and XML）技术，通过 JavaScript 在后台与服务器进行异步...

    消息提示框 js ajax

    本文将深入探讨如何使用JavaScript（JS）和Ajax技术来创建一款类似于QQ弹窗的炫酷消息提示框。 首先，我们来了解JavaScript（JS）。JavaScript是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发。它主要...

    YMessageBox Ajax无刷新提示框插件.rar

    YMessageBox是一个由JS完成的Ajax无刷新提示框插件，本源码包内是其演示示例，看一看吧，每一个弹框都挺漂亮，而且实用，可弹出确认提示、警告提示、常规提示和错误信息，仿windows的形式，每个弹窗的前面都带有一个...

    ajax+jsp网页时时刷新提示

    本教程将围绕“Ajax+JSP”这一技术组合，讲解如何实现网页的实时刷新提示。 Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，能够更新部分网页的技术。它通过JavaScript与服务器进行...

    ajax无刷新加载登陆注册

    在Web应用中，用户交互体验是至关重要的，而Ajax（Asynchronous JavaScript and XML）技术则为实现无刷新页面更新提供了可能。Ajax的核心原理是利用JavaScript与服务器进行异步数据交换，使得网页可以在不重新加载...

    Laravel开发-laravel-ajax-only-middleware

    `laravel-ajax-only-middleware`是一个特定的中间件，设计用于确保只有通过Ajax（异步JavaScript和XML）请求才能访问特定的路由或控制器方法。这在某些场景下非常有用，例如保护敏感数据或者避免非Ajax请求导致的...

    仿新浪微博jquery qtip ajax提示框

    通过以上技术的综合运用，"仿新浪微博jquery qtip ajax提示框"能够实现类似新浪微博的互动体验，为用户提供即时的、无刷新的信息提示服务。在实际开发过程中，还需要考虑到性能优化、错误处理、兼容性测试等方面，以...

    数据操作后，页面alert提示例子2-ajax实现

    Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术，极大地提升了Web应用的交互性和响应速度。 首先，我们需要理解Ajax的工作原理。Ajax的核心是...

    jquery+ajax实现无刷新提交的功能

    这里弹出提示框显示“提交成功”，并将输入框清空。 ```php require "config.php"; require "conn.php"; $writer = $_POST['writer']; $pass = $_POST['pass']; mysql_query("INSERT INTO `tt`.`user`(`id`, `...

    ajax实现无刷新删除

    在本例中，我们使用 AJAX 实现了用户删除功能，使得用户在点击删除按钮后，无需刷新整个页面，只需通过后台处理删除操作，并将结果返回给前端进行相应的提示。 2. **Struts2**：这是一个用于构建企业级 Java web ...

    jsp-Ajax_Login_songxv7_jsp_

    【标题】"jsp-Ajax_Login_songxv7_jsp_" 指的是一份使用JSP和Ajax技术实现无刷新登录的示例项目。在这个项目中，开发人员 "songxv7" 展示了如何在JSP页面上集成Ajax，以提供更流畅的用户体验，避免在用户进行登录...

    ---Ajax下拉提示

    Ajax允许我们在不刷新整个页面的情况下与服务器进行数据交换，通过创建XMLHttpRequest对象来实现异步通信。这个过程包括以下步骤： 1. **初始化XMLHttpRequest对象**：在JavaScript中创建一个新的XMLHttpRequest...

    Laravel开发-salao-despesas-ajax .zip

    在Laravel中，开发者可能会利用Ajax来创建无刷新的表单提交、数据检索和实时更新等功能，以提升应用的响应速度和用户体验。 以下是关于Laravel和Ajax开发的一些关键知识点： 1. **Laravel基础知识**：Laravel的...

    Ajax弹出提示框源码示例

    Ajax弹出提示框是一种在网页上实现动态交互体验的技术，它允许我们在不刷新整个页面的情况下更新部分页面内容。本示例中的"Ajax弹出提示框源码"展示了一个功能完善的弹窗系统，其中包括了Ajax技术、提示框效果、页面...

    C# ASP.NET - AJAX数码相册

    它结合了C#编程语言、ASP.NET框架和AJAX（Asynchronous JavaScript and XML）技术，使得Web应用程序能够实现部分页面更新，提高用户体验，而无需整个页面刷新。在"**C# ASP.NET - AJAX数码相册**"项目中，我们将深入...

    login-form-using-ajax.rar_ajax form_ajax login_ajax login form

    在IT行业中，Ajax（异步JavaScript和XML）技术被广泛应用于网页和应用程序，以实现页面局部刷新，提高用户体验。在这个“login-form-using-ajax.rar”压缩包中，我们重点关注的是如何利用Ajax来创建一个动态的登录...

Magicbox
Global site tag (gtag.js) - Google Analytics