ajax实例及实现文本框异步搜素
search.jsp（WebContent/jsp/search.jsp）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Search</title>
<script type="text/javascript"> /***单机文本框时检查文本框的值***/
function changeValue(){
var tab = document.getElementById("tabId");
var inputStr = document.getElementById("inputStr");
var inputValue = inputStr.value;
if(inputStr.value==null || inputStr.value==""){
tab.style.display='none';
}else{
ajax(inputValue);
tab.style.display='table';
}
}
/***当按下或释放键时检查文本框的值***/
function checkField(obj){
var tab = document.getElementById("tabId");
var inputStr = document.getElementById("inputStr"); var inputValue = inputStr.value; if(obj==null || obj==""){
tab.style.display='none';
}else{
tab.style.display='table';
ajax(inputValue);
}
}
/***单机td时给文本框赋值***/
function display(obj){
var tab = document.getElementById("tabId");
document.getElementById("inputStr").value=obj.innerHTML;
tab.style.display='none';
}
/***onmouseover事件给文本框赋值***/
function setInputValue(obj){
var tab = document.getElementById("tabId");
document.getElementById("inputStr").value=obj.innerHTML;
} function ajax(param) {
//先声明一个异步请求对象
var xmlHttpReg = null;
if (window.ActiveXObject) {//如果是IE
xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
}
//如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
if (xmlHttpReg != null) {
xmlHttpReg.open("post", "/Test/SearchServlet?param="+param, true);
xmlHttpReg.send(null);
xmlHttpReg.onreadystatechange = doResult; //设置回调函数
}
//回调函数
//一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应 //设定函数doResult()
function doResult() {
if (xmlHttpReg.readyState == 4) {//4代表执行完成
if (xmlHttpReg.status == 200) {//200代表执行成功
var resultValue = xmlHttpReg.responseText;
if(resultValue!=null){
document.getElementById("tabId").innerHTML=resultValue;
}
}
}
}
}
</script>
</head>
<body>
<input type="text" name="inputStr" id="inputStr" onclick="changeValue()" onkeydown="checkField(this.value)" onkeyup="checkField(this.value)">
<table style="border:1px solid;display:none;cellpadding:0" width="153px" id="tabId">
<!--
<tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">aaaaa</td></tr>
<tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">bbbbb</td></tr>
<tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">ccccc</td></tr>
<tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">ddddd</td></tr>
-->
</table>
</body>
</html>
SearchServlet(com.test.srevlet.SearchServlet)
package com.test.srevlet; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet("/SearchServlet")
public class SearchServlet extends HttpServlet {
private static final long serialVersionUID = 1L; public SearchServlet() {
super();
} protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String param = request.getParameter("param");
StringBuffer returnStr = new StringBuffer();
String[] strs = null;
if(param.endsWith("aa")){
strs=new String[]{"a","aa","aaa","aaaa"};
for (int i = 0; i < strs.length; i++) {
returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\">");
returnStr.append(strs[i]);
returnStr.append("</td></tr>");
}
}else if(param.endsWith("aas")){
strs=new String[]{"sas","saas","saaas","saaaas"};
for (int i = 0; i < strs.length; i++) {
returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\">");
returnStr.append(strs[i]);
returnStr.append("</td></tr>");
}
}else if(param.endsWith("aass")){
strs=new String[]{"f","faa","faaa","faaaa"};
for (int i = 0; i < strs.length; i++) {
returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\">");
returnStr.append(strs[i]);
returnStr.append("</td></tr>");
}
}else{
returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\"></td></tr>");
} System.out.println(returnStr.toString());
response.getWriter().write(returnStr.toString());
} }
ajax实例及实现文本框异步搜素的更多相关文章
- input文本框实现宽度自适应代码实例，input文本框
本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <html> < ...
- Ajax - 异步处理（点击变成文本框并修改）
效果: 对应的文档结构: Test.aspx 前台代码: 引入JQuery(jquery-1.8.3.min.js). 引入自己所写的JS代码(UserJS.js). <html xmlns=& ...
- django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用
一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts import ...
- JQuery+AJAX实现搜索文本框的输入提示功能
平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...
- 原生Ajax GET+POST请求无刷新实现文本框用户名是否被注册
实现Ajax需要使用一个核心对象XMLHttpRequest XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页.当页面全部加载完毕后,客户端通过该对象向服务器请求 ...
- input文本框实现宽度自适应代码实例
代码实例如下: <!DOCTYPE html> <html><head><meta charset="utf-8"><meta ...
- 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ；和CKEditor实例
http://www.cnblogs.com/cxd4321/archive/2013/01/30/2883078.html 目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多 ...
- Javascript实例技巧精选(7)—设置和获取文本框与文本域的光标位置（兼容IE和Chrome,Firefox）
>>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox ...
- SAP 文本框实例
SAP 文本框 简单实例 REPORT ZTEST001. DATA: OK_CODE LIKE SY-UCOMM, SAVE_OK LIKE SY-UCOMM. DATA: REF_EDIT_CTN ...
随机推荐
- 深入了解——CSS3新增属性
CSS3 选择器(Selector) 写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: 清单 1. C ...
- 通用mapper的使用
通用mapper的使用 导入依赖 <dependency> <groupId>com.github.abel533</groupId> <artifactId ...
- MVC中的Startup.Auth.cs、BundleConfig.cs、FilterConfig.cs和RouteConfig.cs
一.MVC中的Startup.Auth.cs.BundleConfig.cs.FilterConfig.cs和RouteConfig.cs四个文件在app_start中 <1>Bundle ...
- 《JS权威指南学习总结--7.9 ES5中的数组方法》
内容要点: ES5中定义了9个新的数组方法来遍历.映射.过滤.检测.简化和搜索数组. 概述:首先,大多数方法的第一个参数接收一个函数,并且对数组的每个元素(或一个元素)调用一次该函数. 如果是稀疏数组 ...
- 《JS权威指南学习总结--6.7属性的特性》
内容要点: 一.ES5中查询和设置属性的API 1.可以通过这些API给原型对象添加方法,并将它们设置成不可枚举的,这让它们看起来更像内置方法. 2.可以通过这些API给对象定义不能修改或删除的属性, ...
- 单击dbgrid列标题排序 升降序
delphi中如何通过单击列标题进行升降排序, 在dbgrid的ontitleclick事件里添加这样的事件处理 procedure TForm3.DBGrid1TitleClick(Column: ...
- jxls导出EXCEL模板
http://jxls.sourceforge.net/ InputStream templateInput = null; InputStream in = null; OutputStream o ...
- [转]详细的mysql时间和日期函数
这里是一个使用日期函数的例子.下面的查询选择了所有记录,其date_col的值是在最后30天以内: mysql> SELECT something FROM table WHERE TO_DAY ...
- [译] Block 小测验
本文来源于 ParseBlog 的其中一篇博文 <Objective-C Blocks Quiz> 如果您觉得我的博客对您有帮助,请通过关注我的新浪微博 MicroCai 支持我,谢谢! ...
- WimTool(Wim映像处理工具) V1.30.2011.501 免费绿色版
软件名称: WimTool(Wim映像处理工具) V1.30.2011.501 免费绿色版软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinX ...