今天做到一个模糊查询的功能,是这样的,要求输入企业或个人关键字,根据关键字输入匹配的结果,点击结果进行个人或企业信用记录的查询。
实现思路:
1.前端发送ajax请求到指定action,带参数name。这个请求可以使button的onclick 也可以使input输入框的onkeyup,onkeyup好像更符合自动匹配的风格,不过对于百万条数据可能会有延迟问题影响交互,所以选择第一种
2.后台得到数据,向sqlserver数据库发送sql事务,执行一个存储过程,得到一个结果表
3. action对结果表进行格式化,返回一个字符串,这个字符串可以是一个json,也可以直接显示一个带html格式的字符串
下面写几个重要的代码段:
jsp页面:
布局:
<table>
<tr>
<td>关键字</td>
<td><input type="text" id="name" name="name"/></td>
<td><button οnclick="sub()">查询</td>
</tr>
<t/able>
javascript代码:
function sub(){
var name= document.getElementById("name").value; //获取输入的关键字
//为兼容IE67新建的xmlhttp要进行区分
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest;
}else{
xmlhttp = new ActiveXobject("Microsoft.XMLHTTP");
}
//当执行成功返回结果时的操作,没有返回时一直在等待
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status ==200)
{
var xmlDoc = xmlhttp.responseText;
//对xmlDoc进行处理,可以直接inner到指定标签
}
}
xmlhttp.open("POST","发送的url",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name="+name); //传递参数
}
在Struts2的action中,我采用的是io流的形式返回的。简单些段action中的代码。
HttpServletResponse response = ServletActionContext.getReponse();
PrintWriter out = response.getWriter();
String res="<span> 模糊查询结果:</span>";
//....对list的html显示进行格式化,最后全部加入到res中
out.println(res);
out.flush();
out.close();
这样点击查询按钮就给action发送请求,结果就能从XMLhttp中拿到了。很简单啊,就是显示有点麻烦。