JS、AJAX等实现：HTML/JSP页面中即时显示查询的数据，怎么写？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS、AJAX等实现：HTML/JSP页面中即时显示查询的数据，怎么写？相关的知识，希望对你有一定的参考价值。
比如在查询框中输入“你好”，那么在数据库或table或div数据中含有“你好”这两个字的数据都列出来，模糊查询，不用点击查询按钮，你每输入一个字就马上列出符合条件的，怎么做？谢谢
struts2 action 代码import java.io.IOException;import java.io.PrintWriter;public class AutoComplete extends CommonAction /**
* 用于实践ajax google 的样式
* 用于接收服务器端请求的
*/
//抓取从页面穿过来的字符串 用于和服务器端的单词进行匹配
private String word ;
public AutoComplete()
public String onblurquery() throws Exception
//保存要查询的东西
//注意ajax 中 这个所谓的视图层不返回页面 只返回数据
this.getRequestMap().put("word", word);
//System.out.println("struts - > "+word);
this.getResponse().setContentType("text/xml;charset=gb2312;");
return "toshow";
public String getWord()
return word;
public void setWord(String word)
this.word = word;
jsp 代码<%@ page contentType="text/html; charset=gb2312"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>google</title>
<meta http-equiv="description" content="This is my page">
<style type="text/css">
/*当文本没有被选中的时候就使用这个样式*/
.auto-1
background-color: #FFCC99;
color: gray;
cursor: pointer;
width: 100%;
/*当文本被选中的时候就是用这个样式*/
.auto-2
background-color: #CCFF99;
color: green;
cursor: pointer;
width: 100%;
</style>
<script type="text/javascript" src="employees/jquery.js"></script>
<script type="text/javascript" src="employees/auto.js"></script>
</head>
<body>
google:
<input type="text" id="word">
<input type="button" value="查询" id="chk"><br>
<div id="auto"></div>
</body>
</html>jquery 代码 //表示当前被选中的节点
var highlightindex = -1;
var timeoutId;
$(document).ready(function ()
//alert("准备好了");
//保存文本输入框
var wordinput=$("#word");
//保存文本的
var wordinputOffset = wordinput.offset();
//弹出框应该等于在文本的下面 那么就是文本的宽等于div的宽
$("#auto").hide().css("border","1px solid #CDD2CB").css("position","absolute")
.css("top",wordinputOffset.top+wordinput.height()+5+"px").css("left",wordinputOffset.left+"px").width(wordinput.width()+40+"px");
//给文本框添加键盘按下并谈起的实践
$("#word").keyup(function (event)
//处理键盘实践
var myEvent = event || window.event;
//如果输入的是字母 应该是将文本中最新的信息发送到服务器
//如果是退格或是删除键 那么就将文本中最新的信息发送给服务器
var keyCode = myEvent.keyCode;
if(keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46)
//1 得到文本框中的内容
var wordtext = $("#word").val();
if(wordtext!="")
//2 把这的信息网服务器中发送
window.clearTimeout(timeoutId);
//对发送到服务器进行交互延迟500毫秒 比秒打字太快了 没有抓取到
timeoutId = window.setTimeout(function ()
//第一个参数 请求的地址 第二个参数 传递的参数 第三个参数 回调函数 第四个参数 数据回传的数据类型
$.post("auto_onblurquery.aiyu",word:wordtext,function(data)
// 将dom对象data 转化成JQuery 对象昂
//alert(data);
var jqueryObj = $(data);
//alert(data);
// 到xml 中找到所有的woerd节点
var wordNode = jqueryObj.find("word");
//alert(wordNode);
var autoNode = $("#auto");
autoNode.html("");
// 遍历 所有恶woed 节点 取出 单词
wordNode.each(function (i)
//获取单词的内容
var wordN = $(this);
// 新建div节点 将单词放进去
//alert(wordN.text());
//将div节点加入到弹出框汇总
var newdivNode = $("<div>").attr("id",i);
newdivNode.addClass("auto-1").html(wordN.text()).appendTo(autoNode);
//给鼠标加入进入的时候就高亮
newdivNode.mouseover(function ()
if(highlightindex!=-1)
$("#auto").children("div").eq(highlightindex).removeClass("auto-2").addClass("auto-1");
highlightindex = $(this).attr("id");
$(this).removeClass("auto-1").addClass("auto-2");
);
//鼠标移出的加上的样式
newdivNode.mouseout(function ()
$(this).removeClass("auto-2").addClass("auto-1");
);
//鼠标点击的时候增加的样式
newdivNode.click(function ()
//取出文本的内容
var comtext = $(this).text();
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
$("#word").val(comtext);
);
);
if(wordNode.length>0)
if($("#word").val()=="")
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
else
$("#auto").show();
else
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
//alert(data);
,"xml");
,500);
else
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
else if(keyCode == 38 || keyCode == 40)
//如果是按得向上或是向下键
if(keyCode == 38)
//上
var autoNodes = $("#auto").children("div");
if(highlightindex!=-1)
autoNodes.eq(highlightindex).removeClass("auto-2").addClass("auto-1");
highlightindex--;
else
highlightindex = autoNodes.length-1;
if(highlightindex==-1)
//如果修改过后的索引为-1 则索引到最后的节点
highlightindex = autoNodes.length-1;
autoNodes.eq(highlightindex).removeClass("auto-1").addClass("auto-2");
if(keyCode == 40)
//下
var autoNodes = $("#auto").children("div");
if(highlightindex!=-1)
autoNodes.eq(highlightindex).removeClass("auto-2").addClass("auto-1");
highlightindex++;
if(highlightindex>=autoNodes.length)
highlightindex=0;
if(highlightindex==-1)
//如果修改过后的索引为-1 则索引到最后的节点
highlightindex = 0;
autoNodes.eq(highlightindex).removeClass("auto-1").addClass("auto-2");
else if(keyCode == 13)
//按下的回车
//下拉框中被选中有选中的东西
if(highlightindex!=-1)
//取出文本的内容
var comtext = $("#auto").children("div").eq(highlightindex).text();
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
$("#word").val(comtext);
else
//下拉框中没有选中的东西
alert("文本框的["+$("#word").val()+"]被提交了");
$("#auto").hide();
$("#word").blur();
);
$("input[id='chk']").click(function ()
alert("文本框的["+$("#word").val()+"]被提交了");
);
); 最后返回xml 的代码<%@ page contentType="text/xml; charset=gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<words>
<s:if test="%'absolute'.startsWith(#request.word)">
<word>absolute</word>
</s:if>
<s:if test="%'anyone'.startsWith(#request.word)">
<word>anyone</word>
</s:if>
<s:if test="%'anything'.startsWith(#request.word)">
<word>anything</word>
</s:if>
<s:if test="%'apple'.startsWith(#request.word)">
<word>apple</word>
</s:if>
<s:if test="%'break'.startsWith(#request.word)">
<word>break</word>
</s:if>
<s:if test="%'boolean'.startsWith(#request.word)">
<word>boolean</word>
</s:if>
<s:if test="%'breach'.startsWith(#request.word)">
<word>breach</word>
</s:if>
</words> 参考技术A jsp页面，嵌入查询数据库，有点原始了你可以把数据库查询封装到一个bean里，然后提供一个查询并返回json的方法在你的ajax页面（这个页面是一个jsp文件），Import这个bean，然后实例化，并调用哪个方法即可大概是"<td>"+getDBJson(1)+“</td>” 参考技术B 这个很简单,ajax配置下jsp上的js就可以了,模糊查询我也做出来过,也在使用中 我有简单的ajax实现代码,可以给你...一两句说不清楚QQ84024257
jsp页面 列表 展示 ajax异步实现
1. 服务端先返回页面基本结构（如message.jsp），
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <!--[if lt IE 7]> <html class="ie ie6 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="ie ie7 lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="ie ie8 lt-ie9" lang="en"> <![endif]--> <!--[if IE 9]> <html class="ie ie9" lang="en"> <![endif]--> <!--[if !IE]><!--> <html lang="en" class="no-ie"> <!--<![endif]--> <head> <!-- Meta--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <title>消息中心</title> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]--> <!-- Bootstrap CSS--> <link rel="stylesheet" href="<%=path %>/app/css/bootstrap.css"> <!-- Vendor CSS--> <link rel="stylesheet" href="<%=path %>/vendor/fontawesome/css/font-awesome.min.css"> <link rel="stylesheet" href="<%=path %>/vendor/animo/animate+animo.css"> <!-- START Page Custom CSS--> <!-- Data Table styles--> <link rel="stylesheet" href="<%=path %>/vendor/datatable/extensions/datatable-bootstrap/css/dataTables.bootstrap.css"> <link rel="stylesheet" href="<%=path %>/vendor/datatable/extensions/ColVis/css/dataTables.colVis.css"> <!-- END Page Custom CSS--> <!-- App CSS--> <link rel="stylesheet" href="<%=path %>/app/css/app.css"> <link rel="stylesheet" href="<%=path %>/app/css/beadmin-theme-c2.css"> <link rel="stylesheet" href="<%=path %>/vendor/sweetalert/lib/sweet-alert.css" /> <link rel="stylesheet" href="<%=path %>/css/page.css"/> <!-- Modernizr JS Script--> <script src="<%=path %>/vendor/modernizr/modernizr.js" type="application/javascript"></script> <!-- FastClick for mobiles--> <script src="<%=path %>/vendor/fastclick/fastclick.js" type="application/javascript"></script>. <script> var basePath = ‘<%=basePath %>‘; var pageNo = ${page.pageNo}; var totalCount = ${page.totalCount}; var totalPage = ${page>totalPage}; var pageSize = ${page.pageSize}; </script> </head> <body> <!-- START Main wrapper--> <div class="wrapper" > <!-- START Main section--> <section> <!-- START Page content--> <div class="content-wrapper" style="margin-left:-250px;margin-top:-40px;"> <h3>消息中心 <!-- <div style="float:right; margin-top:5px;" class="form-group"> <button type="button" onclick="$(‘#myModal‘).modal({backdrop: ‘static‘, keyboard: false});;" class="btn btn-labeled btn-success"> <span class="btn-label"><i class="fa fa-plus"></i> </span>添加</button> </div>--> <small>消息管理</small> </h3> <!-- START panel--> <!-- START DATATABLE 3--> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading" style="border-bottom:1px solid #eee;"> <form class="form-inline" id="searchForm" method="post" action="<%=path %>/page/messageSearch.action"> <div class="form-group"> <b>创建时间: </b> <div class="datetimepicker input-group date mb-lg" data-pick-time="false"> <input type="text" class="form-control" id="searchDateStart" name="searchDateStart" value=‘‘ disabled="disabled"> <span class="input-group-addon"> <span class="fa-calendar fa"></span> </span> </div> <span style="margin-top:-8px;">—</span> <div class="datetimepicker input-group date mb-lg" data-pick-time="false"> <input type="text" class="form-control" id="searchDateEnd" name="searchDateEnd" value=‘‘ disabled="disabled"> <span class="input-group-addon"> <span class="fa-calendar fa"></span> </span> </div> </div> <div class="form-group"> <b>接收者: </b> <input type="text" class="form-control mb-lg" id="receiver" name="receiver" value=‘‘> </div> <div class="form-group"> <a style="margin:-10px 0 0 5px; float:left;" href="javascript:void(0);" class="mb-sm btn btn-primary" type="button" id="searchMessage">搜索</a> </div> <input type="hidden" id="pageNo" name="pageNo" value=‘‘> </form> </div> <div class="table-responsive"> <table class="table table-bordered table-hover dataTable no-footer" id="table-ext-1" > <thead> <tr> <th style="width:300px;">描述</th> <th class="sorting center" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">发送者</th> <th class="sorting center" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">接收者</th> <th class="sorting center" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">创建时间</th> <th class="th150 center">操作</th> </tr> </thead> <tbody id="message_body"> </tbody> <tfoot> <tr> </tr> </tfoot> </table> </div> <div class="panel-footer"> <div class="row"> <div style="line-height:35px;" class="col-lg-3"> <div class="input-group pull-left" id="message_showLines"> </div> </div> <div class="col-lg-9"></div> <div class="tcdPageCode"></div> </div> </div> </div> </div> </div> <!-- END DATATABLE 3--> </div> <!-- END Page content--> </section> <!-- END Main section--> </div> <!-- END Main wrapper--> <!-- START modal--> <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal" > <div class="modal-dialog" style="width:600px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button> <h4 id="myModalLabel" class="modal-title">新建应用</h4> </div> <div class="modal-body" style="padding-right:20px;"> <form method="get" action="/" class="form-horizontal"> <fieldset> <div class="form-group" style="padding-bottom:5px;"> <label class="col-sm-2 control-label">名称</label> <div class="col-sm-10"> <input type="text" class="form-control"> </div> </div> <div class="form-group" style="margin-top:10px;"> <label class="col-sm-2 control-label">描述</label> <div class="col-sm-10"> <input type="text" class="form-control"> </div> </div> <div class="form-group" style="margin-top:10px;"> <label class="col-sm-2 control-label">URL</label> <div class="col-sm-10"> <input type="text" class="form-control"> </div> </div> <div class="form-group" style="margin-top:5px;"> <label class="col-sm-2 control-label">类别</label> <div class="col-sm-10"> <select class="form-control m-b" name="account"> <option>Web</option> <option>Mobile</option> </select></div> </div> <div class="form-group" style="margin-top:5px;"> <label class="col-sm-2 control-label">授权模式</label> <div class="col-sm-10"> <select class="form-control m-b" name="account"> <option>授权</option> <option>不授权</option> </select></div> </div> <div class="form-group" style="margin-top:10px;"> <label class="col-sm-2 control-label">LOGO</label> <div class="col-sm-10"> <input type="button" class="form-control"> </div> </div> </fieldset> </form> </div> </fieldset> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-default">取消</button> <button type="button" class="btn btn-primary">确定</button> </div> </div> </div> </div> </div> <div id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal"> <div class="modal-dialog" style="width:650px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button> <h4 id="myModalLabel" class="modal-title">修改密码</h4> </div> <div class="modal-body"> <form method="get" action="/" class="form-horizontal"> <fieldset> <div class="form-group" style="padding-bottom:5px;"> <label class="col-sm-2 control-label">原密码</label> <div class="col-sm-10"> <input type="text" class="form-control"> </div> </div> <div class="form-group" style="padding-bottom:5px;"> <label class="col-sm-2 control-label">新密码</label> <div class="col-sm-10"> <input type="password" name="password" class="form-control"> </div> </div> <div class="form-group" style="padding-bottom:5px;"> <label class="col-sm-2 control-label">确认密码</label> <div class="col-sm-10"> <input type="password" name="password" class="form-control"> </div> </div> </fieldset> </form> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div id="myModal3"以上是关于JS、AJAX等实现：HTML/JSP页面中即时显示查询的数据，怎么写？的主要内容，如果未能解决你的问题，请参考以下文章