jsp中使用Ajax处理过程及页面动态显示处理结果(out.print出html)

jsp中运用Ajax处理过程及页面动态显示处理结果(out.print出html)

1 我们先来看下jsp上调用这个ajax的代码

?

<input type="text" name="merchantNo" id="merchantNo2" size="30"onblur="validateMerchantNo2();" /><font color="red">*</font>

<span id="merchantError2" style="float: bottom; margin-top: 1000px;">&nbsp;&nbsp;精确查询</span>

??可以看到鼠标事件onblur(鼠标离开时候触发)触发的是一个js方法validateMerchantNo2();可想而知这个就是ajax方法了。留意span id="merchantError2"这个，这个就是后面ajax处理后根据处理结果动态显示的结果信息。

?

2 现在看下这个ajax方法?validateMerchantNo2

?

<script type="text/javascript">var xmlHttp;function createXMLHttpRequest(){if (window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();}}function validateMerchantNo2(){createXMLHttpRequest();xmlHttp.onreadystatechange = handleStateChange;var merchantNo = document.getElementById("merchantNo2").value;var merchantSelect = document.getElementById("merchantSelect").value;var url = "credit_validuateMerchantNo2.action?time=" + new Date().getTime()+ "&merchantNo=" + merchantNo + "&merchantNoFlag=" + merchantSelect;xmlHttp.open("post", url, true);xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");xmlHttp.send(null);}function handleStateChange(){if (xmlHttp.readyState == 4){if (xmlHttp.status == 200){var doc = xmlHttp.responseText;var menuNameError = document.getElementById("merchantError2");menuNameError.innerHTML = doc;}}}</script>

?

这是一个比较经典的写法，留意主体方法里多了?xmlHttp.setRequestHeader("content-type",
???"application/x-www-form-urlencoded;charset=utf-8");这个，这个就是用于把处理结果通过html字符串返回到jsp页面显示出来的页面申明。最终这个处理结果会在：

???var menuNameError = document.getElementById("merchantError2");
???menuNameError.innerHTML = doc;

这个id为merchantError2的地方显示出来。

?

3 我们看下相应的java处理方法

public final String validuateMerchantNo2() throws Exception{ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");PrintWriter out = ServletActionContext.getResponse().getWriter();StringBuffer validateMsg = null;if ("".equals(merchantNo)){validateMsg = new StringBuffer("<font color='red'>&nbsp;&nbsp;商户编号不能为空！</font>");} else{List<CreditSummonsInfo> creditTest = creditService.queryCreditByNo(merchantNo, merchantNoFlag);if (creditTest != null && creditTest.size() > 0){validateMsg = new StringBuffer("<font color='green'>&nbsp;&nbsp;ok!</font>");} else{validateMsg = new StringBuffer("<font color='red'>&nbsp;&nbsp;该商户编号暂无数据！</font>");}}out.print(validateMsg.toString());return null;}

?

这里的List<CreditSummonsInfo> creditTest = creditService.queryCreditByNo(merchantNo, merchantNoFlag);还是通过spring注入的，处理数据库的功能代码

?

最后输出?out.print(validateMsg.toString());
??return null;

就完成了这个过程。

?