AJAX的好处就是异步进行交互,让我们感觉页面并没有其他的动作(刷新),让我们感觉页面做的更友好了,交互性更能跟上现在的web应用。利用AJAX进行校验能够在不刷新页面的情况下完成和服务器端的交互,并根据数据的处理结果按你想要的方式对页面作出即时更改。润乾的填报表校验功能,可以在用户填报数据后及时的完成数据有效性的校验,保证填报数据的正确性并能给客户有效直观的提示,客户端的js校验在填报表中的利用很常见,同样也可以将AJAX校验利用在润乾的填报表中。本文将介绍一个AJAX校验在填报表中使用的实例。
报表需求:
在用户信息填报页面实现对输入用户名的校验,查询数据库表,在填报表单中提示填写的用户名在数据库中是否存在。
需求实现:
1. 报表展现页面(register.jsp)
部分代码:
<!—引入ajax的js文件>
<script type="text/javascript" language="javascript" src="script/ajax_func.js"></script>
<script type="text/javascript" language="javascript">
function doCheck(name) {
var f = document.forms[0];
if (name != "") {
document.getElementById("report1_B10").innerHTML="系统正在处理您的请求,请稍候..."
//确定发送请求的方式和请求页面的URL及参数
send_request("GET","registerCheck.jsp?value=" + name, null, "text", showFeedbackInfo);
}
else {
document.getElementById("report1_B10").innerHTML = "请输入用户名!";
}
return true;
}
// 处理返回信息的函数
function showFeedbackInfo() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
//在报表的B10单元格中显示返回的信息
document.getElementById("report1_B10").innerHTML = http_request.responseText;
}
else {//请求页面不正常
alert("您所请求的页面有异常!");
}
}
}
</script>
……
<report:html name="report1"
reportFileName="/register.raq"
funcBarLocation=""
excelPageStyle="1"
width="-1"
/>
2. 用户名校验页面(registerCheck.jsp)
该页面主要是完成数据库查询,根据参数查询数据库看是否有用户名相同的数据库记录,并输出相应信息。
部分代码:
String value = request.getParameter("value");
if (!value.equals("")) {
Connection con = null;
try{
Driver driver = (Driver) Class.forName("org.hsqldb.jdbcDriver").newInstance();
DriverManager.registerDriver(driver);
con= DriverManager.getConnection("jdbc:hsqldb:hsql://localhost/runqianDB","sa","");
String sql = "SELECT EMPNAME from EMPLOYEE where EMPNAME='"+value+"'";
ResultSet rs=con.createStatement().executeQuery(sql);
if (rs.next()) {
out.print("该用户名已存在!");
}
else{ out.print("该用户名可用!"); }
}catch (Exception e){
e.printStackTrace(); }
}
else {
out.println("参数错误");
}
3. 报表模板:
在B4单元格中调用页面封装好的js函数完成AJAX校验
实现效果:
情况一:当数据库中存在相同用户名,提示“该用户名已存在!”
情况二:当数据库中不存在相同用户名,提示“该用户名可用!”