1 我们先来看下jsp上调用这个ajax的代码
<input type="text" name="merchantNo" id="merchantNo2" size="30"οnblur="validateMerchantNo2();" />
<font color="red">*</font>
<span id="merchantError2" style="float: bottom; margin-top: 1000px;"> 精确查询</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'> 商户编号不能为空!</font>");
} else
{
List<CreditSummonsInfo> creditTest = creditService.queryCreditByNo(merchantNo, merchantNoFlag);
if (creditTest != null && creditTest.size() > 0)
{
validateMsg = new StringBuffer("<font color='green'> ok!</font>");
} else
{
validateMsg = new StringBuffer("<font color='red'> 该商户编号暂无数据!</font>");
}
}
out.print(validateMsg.toString());
return null;
}
这里的List<CreditSummonsInfo> creditTest = creditService.queryCreditByNo(merchantNo, merchantNoFlag);还是通过spring注入的,处理数据库的功能代码
最后输出 out.print(validateMsg.toString());
return null;
就完成了这个过程。