Ajax 模糊查询的简单实现[通俗易懂]
AJAX 实现 查询 简单 通俗易懂 模糊
2023-06-13 09:11:54 时间
大家好,又见面了,我是你们的朋友全栈君。
类似于百度的搜索引擎模糊查询功能,不过百度的模糊查询功能更强大,这里简单实现下.
要实现模糊查询,首先要做的就是把SQL写好。话不多少,直接贴代码了!
JSP页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'search.jsp' starting page</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">
<script type="text/javascript" src="prototype.js"></script>
<style type="text/css">
body{font:11px arial;}
#suggest{
position:absolute;
background-color:#FFFFFF;
text-align: :left;
border: 1px solid #000000;
display: none;
}
</style>
<script type="text/javascript">
function searchSuggest(){
var url="Search";
var txtSearch=$F("txtSearch");
var pars='txtSearch='+txtSearch;
var searchAjax=new Ajax.Request(
url,
{
method:'get', //get方式提交
parameters:pars, //提交参数
onComplete:processRequest
}
);
}
function processRequest(req){
var sobj=$("suggest");
sobj.innerHTML="";
var str=req.responseText.split("-");
var suggest="";
if(str.length>0&&str[0].length>0){
for(i=0;i<str.length;i++){
suggest+="<div>"+str[i]+"</div>";
}
sobj.innerHTML=suggest;
$("suggest").style.display="block";
}else{
$("suggest").style.display="none";
}
}
</script>
</head>
<body>
<h3>Ajax自动搜索提示</h3>
<div style="width:500px">
<form action="" id="formSearch">
<input type="text" id="txtSearch" name="txtSearch" οnkeyup="searchSuggest()"autocomplete="off"/>
<input type="submit" id="cmdSerach" name="cmdSearch" value="搜索"/><br/>
<div id="suggest" style="width:200px"></div>
</form>
</div>
</body>
</html>
Sevlet类:
package servlet.ajax;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Search extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String req=request.getParameter("txtSearch");
PrintWriter out = response.getWriter();
SearchDao sd=new SearchDao();
sd.getText(req);
StringBuffer sb=sd.getText(req);
out.print(sb.toString());
out.flush();
}
}
进行连接数据库,模糊查询的JAVA类:
package servlet.ajax;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
public class SearchDao {
public StringBuffer getText(String req){
//首先定义下连接数据的URL、用户名、密码
String url="jdbc:oracle:thin:@127.0.0.1:1521:orcl";
String user="scott";
String password="yulei123";
String sql="select ename from emp a where a.ename like ?";
if(req.trim().length()==0){
sql=sql+" and 1<>1";
}
List strList=new ArrayList();
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection con=DriverManager.getConnection(url,user,password);
PreparedStatement pre=con.prepareStatement(sql);
pre.setString(1,"%"+req.toUpperCase().trim()+"%");
ResultSet rs=pre.executeQuery();
while(rs.next()){
String ename=rs.getString("ename");
strList.add(ename);
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
StringBuffer sb=new StringBuffer();
int size=strList.size();
for(int i=0;i<size;i++){
sb.append((String)strList.get(i)+"-");
}
return sb;
}
}
代码写好后,就可以在文本框输入字母后就可以模糊查询出数据了!
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/139514.html原文链接:https://javaforall.cn
相关文章
- AJAX跨域问题解决方法(4)——调用方解决跨域详解编程语言
- AJAX跨域问题解决方法(1)——禁止浏览器进行跨域限制详解编程语言
- struts2实现ajax校验的2种方法详解编程语言
- Ajax实现MySQL读写服务接口(ajax读写mysql)
- Ajax快速查询MySQL数据库(ajax查询mysql)
- 展现灵活性Ajax与MySQL的交互(ajax与mysql交互)
- MySQL与Ajax 精彩无穷的开发实现(ajax与mysql)
- Ajax与MySQL实现高效率数据加载(ajax mysql加载)
- Ajax实现对Oracle的异步操作(ajax操作oracle)
- ajax的responseXML返回接受asp
- Ajax使用杂谈也许也是乱弹
- Ajax初试之读取数据篇实现代码
- Ajax读取数据之分页显示篇实现代码
- php中通过Ajax如何实现异步文件上传的代码实例
- jquery怎样实现ajax联动框(一)
- jquery怎样实现ajax联动框(二)
- JSP中获取ExtJS.Ajax前台传递的JSON数据实现过程
- AJAX避免用户重复提交请求实现方案
- JQuery+ajax实现批量上传图片(自写)
- 基于Ajax用户名验证、服务条款加载、验证码生成的实现方法
- 滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨
- JSHTML5音乐天气播放器(Ajax获取天气信息)
- Ajax实现的异步传输与验证示例代码
- js使用ajax读博客rss示例
- jQuery学习笔记之Ajax操作篇(一)-数据加载