Struts2发送ajax请求并在页面显示结果

       今天做到一个模糊查询的功能,是这样的,要求输入企业或个人关键字,根据关键字输入匹配的结果,点击结果进行个人或企业信用记录的查询。

       实现思路:

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中拿到了。很简单啊,就是显示有点麻烦。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值