本文介绍了一个使用JavaScript全局变量的实际案例，通过一个计费模块的开发过程展示了如何利用全局变量进行状态跟踪。具体包括如何定义全局变量、在不同函数间传递状态以及通过AJAX调用后端API验证数据唯一性。
前段时间看到有兄弟在优快云的论坛上说JavaScript没有全局和局部变量,当前我想好像在哪看到过“JavaScript全局变量”,于是去google搜了一下,回家又翻书看了一下,确信它是存在的!恰巧现在在作一个计费的模块,我小试了一下!
<html>
<head>
<script type="text/javascript">
var tempMsg;
function checkNumber(ele){
if(ele.baseFee.value.length==""){
alert("月租费用不能为空");
ele.baseFee.className ='errInput';
ele.baseFee.select();
return false;
}
if(ele.rateFee.value.length==""){
alert("每小时费用不能为空");
ele.rateFee.className ='errInput';
ele.rateFee.select();
return false;
}
if(!tempMsg){
alert("资费政策已经存在");
return false;
}
return true;
}
</script>
有点JavaScript基础的都应该能看懂吧,就是一个增加资费政策的网页,其中要求月租费和每小时费用的联合记录不能出现重复(在库中)
var tempMsg
就是一个全局的(布尔)变量.继续看:
function checkStatus(el){
if(el.value ==""){
alert("fail");
}
var tempV=document.getElementById("base");
sendRequest("/netctoss/pricingManage/queryRecord.do?baseFee="+tempV.value+"&rateFee="+el.value+"");
}
以上是表单中的每小时费用项在失去焦点时触发的处理函数,把每小时费用和月租费用Ajax异步查询,所得的结果是一个布尔值,看Ajax通用的函数:
function sendRequest(strurl){
httpRequest = false;
if(window.XMLHttpRequest){ // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
if(httpRequest.overrideMimeType){
httpRequest.overrideMimeType('text/xml');
}
}else if(window.ActiveXObject){ // IE
try{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {}
}
}
if(!httpRequest){ //异常处理
window.alert("不能创建XMLHttpRequest对象实例");
return false;
}
httpRequest.onreadystatechange = processRequest;
//确定发送的方式和URL以及是否同步执行代码
httpRequest.open("GET",strurl,true);
httpRequest.send(null);
}
以上没什么好说的,关键是processRequest这个函数会拿到查询的结果:
function processRequest(){
var strform = document.forms[0];
if(httpRequest.readyState == 4){ //判断对象状态
if(httpRequest.status == 200){ //信息已成功返回,开始处理信息
var tempstr = httpRequest.responseText;
if(tempstr.indexOf("false")==-1){
tempMsg=true;
}else{
tempMsg=false;
}
}
else{ //页面不正常
alert("您所请求的页面发生错误!");
}
}
}
在以上函数中会给全局变量赋值.
if(tempstr.indexOf("false")==-1){
tempMsg=true;
}else{
tempMsg=false;
}
下面是html的body部分:
</head>
<body>
<form name="form1" method="post" action="/netctoss/pricingManage/addRecord.do" onsubmit="return checkNumber(this);">
<p class="pp">添加新的资费政策</p>
<table width="91%" border="1" bordercolor="#ccccff" bgcolor="#ccddee" class="9P">
<tr>
<td width="12%">资费名称</td>
<td width="30%"><input type="text" name="pricingName"></td>
<td><label id="forName">请输入新建资费名称（只允许用英文，数字，下划线，区分大小写）</label></td>
</tr>
<tr>
<td>月租费用</td>
<td><input type="text" name="baseFee" id="base"></td>
<td>请选择新建资费的月租费用（只允许输入数字或小数点）</td>
</tr>
<tr>
<td>每小时费用</td>
<td><input type="text" name="rateFee" onblur="checkStatus(this)"></td>
<td>请输入每小时的费用（只允许用数字或小数点）</td>
</tr>
<tr>
<td height="10">资费描述</td>
<td><textarea name="pricingDesc"></textarea></td>
<td>请输入对新建资费的简单描述（最多256个汉字）</td>
</tr>
<tr>
<td><div align="right"> </div></td>
<td> </td>
<td>
<input type="submit" name="Submit2" value="提交">
<input type="reset" name="Submit" value="清除"> </td>
</tr>
</table>
<p> </p>
</form>
<body></html>
哪些Jsp,struts 的ActionForm Action我相信大家都会写.如果你确实看不明白,可以给我留消息,等我离开杭州到烟台后(大约两天后)给及时给你回复的
<html><head><script type="text/javascript">
var tempMsg;function checkNumber(ele){
if(ele.baseFee.value.length==""){ alert("月租费用不能为空"); ele.baseFee.className ='errInput'; ele.baseFee.select(); return false; } if(ele.rateFee.value.length==""){ alert("每小时费用不能为空"); ele.rateFee.className ='errInput'; ele.rateFee.select(); return false; } if(!tempMsg){ alert("资费政策已经存在"); return false; } return true;}</script>var tempMsg
就是一个全局的(布尔)变量.继续看:
function checkStatus(el){ if(el.value ==""){ alert("fail"); } var tempV=document.getElementById("base"); sendRequest("/netctoss/pricingManage/queryRecord.do?baseFee="+tempV.value+"&rateFee="+el.value+"");}function sendRequest(strurl){ httpRequest = false; if(window.XMLHttpRequest){ // Mozilla, Safari, ... httpRequest = new XMLHttpRequest(); if(httpRequest.overrideMimeType){ httpRequest.overrideMimeType('text/xml'); } }else if(window.ActiveXObject){ // IE try{ httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e) {} } } if(!httpRequest){ //异常处理 window.alert("不能创建XMLHttpRequest对象实例"); return false; } httpRequest.onreadystatechange = processRequest; //确定发送的方式和URL以及是否同步执行代码 httpRequest.open("GET",strurl,true); httpRequest.send(null);}function processRequest(){ var strform = document.forms[0]; if(httpRequest.readyState == 4){ //判断对象状态 if(httpRequest.status == 200){ //信息已成功返回,开始处理信息 var tempstr = httpRequest.responseText; if(tempstr.indexOf("false")==-1){ tempMsg=true; }else{ tempMsg=false; } } else{ //页面不正常 alert("您所请求的页面发生错误!"); } }}if(tempstr.indexOf("false")==-1){
tempMsg=true;
}else{
tempMsg=false;
}
下面是html的body部分:
</head><body> <form name="form1" method="post" action="/netctoss/pricingManage/addRecord.do" onsubmit="return checkNumber(this);"> <p class="pp">添加新的资费政策</p> <table width="91%" border="1" bordercolor="#ccccff" bgcolor="#ccddee" class="9P"> <tr> <td width="12%">资费名称</td> <td width="30%"><input type="text" name="pricingName"></td> <td><label id="forName">请输入新建资费名称（只允许用英文，数字，下划线，区分大小写）</label></td> </tr> <tr> <td>月租费用</td> <td><input type="text" name="baseFee" id="base"></td> <td>请选择新建资费的月租费用（只允许输入数字或小数点）</td> </tr> <tr> <td>每小时费用</td> <td><input type="text" name="rateFee" onblur="checkStatus(this)"></td> <td>请输入每小时的费用（只允许用数字或小数点）</td> </tr> <tr> <td height="10">资费描述</td> <td><textarea name="pricingDesc"></textarea></td> <td>请输入对新建资费的简单描述（最多256个汉字）</td> </tr> <tr> <td><div align="right"> </div></td> <td> </td> <td> <input type="submit" name="Submit2" value="提交"> <input type="reset" name="Submit" value="清除"> </td> </tr> </table> <p> </p> </form><body></html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
