JS调用Ajax
Ajax又名异步刷新,个人理解为就是局部刷新。进行一下校验作用个人觉得算是半个原创(站在巨人的肩膀上嘛)
html核心代码如下:
<tr>
<td>办公名称:</td>
<td><s:textfield name="build.name" id="name" οnfοcus=""
οnblur="checkName()"></s:textfield><span style="color: red" id="spid">*</span>
</td>
</tr>
js代码
function checkName() {
var dna = document.getElementById("name").value;
var checkdnainfo = $("#spid");
checkdnainfo.html("");
if ("" == dna) {
checkdnainfo.html("请添加名称");
return false;
} else
verifydna();
}
// 加入时间戳
// 即当两次dna一样时,浏览器仍然会去调用后台
function convertURL(url) {
var timstamp = (new Date()).valueOf();
if (url.indexOf("?") >= 0) {
url = url + "&t=" + timstamp;
} else {
url = url + "?t=" + timstamp;
}
return url;
}
function verifydna() {
var name = document.getElementById("name").value;
$.get(convertURL("Admin/Building/check.action?name=" + name), null,
callback);// 这里才是真正调用后台,后台处理完毕后,调用callback函数
}
function callback(data) {
var checkdnainfo = $("#spid");
checkdnainfo.html("");
if (data == "have") {
checkdnainfo.html("此名称无法使用");
} else {
checkdnainfo.html("可以使用");
}
}
最后java后台代码如下:
public void serchBuildingName() throws MyException {
try {
Writer writer = ServletActionContext.getResponse().getWriter();
int size = bs.findByName(name).size();
if (size == 0) {
writer.write("not_have");//与JS中对应即可
} else {
writer.write("have");
}
writer.flush();//强制输出,不要忘记关闭流
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
大功告成,上结果:
1.
2.
最后关于Ajax的JS调用,网上搜索了一下方法一大堆,个人觉得这样写比较简单,关于兼容性问题,个人用的FF+IE10都没有问题,所以具体问题具体分析。