DIV弹出层+Ajax 实践Button OnClientClick验证

最新推荐文章于 2021-09-30 14:21:28 发布

weixin_30596343

最新推荐文章于 2021-09-30 14:21:28 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yinhaiming/archive/2009/03/19/1416760.html

本文介绍了一种利用Ajax技术改进旧系统的方法，通过对系统中特定DIV元素的可见性控制及客户端验证来提升用户体验。该方案在不大幅改动现有系统结构的前提下实现了地址验证的功能。

DIV层

Code
<div id="divPlusAddress" runat="server" style="visibility:hidden;">
<div id="divCover" style="left:0px; top:0px; width:100%; height:100%; background-color:Gray; position:absolute;filter:alpha(opacity=50);"></div>
<div style="z-index:5; top:100px; left:200px; position:absolute; width:300px; height:150px; background-color:White;">
<ul style="list-style:none;">
<li><span style="margin-left:10px;">地址:</span><span style="margin-left:10px;"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></span>
</li>
<li><span style="margin-left:10px;">备注:</span><span style="margin-left:10px;"><asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Width="148px"></asp:TextBox></span>
</li>
<li><span style="margin-left:80px;"><asp:Button id="btnclientAdd" runat="server" OnClick="Button1_Click" OnClientClick="return checkAddress();" style="width:50px;" Text="添加" /></span>
<span><input type="button" id="btnClientCancel" value="取消" style="width:50px;" onclick="btnCancel();"/></span>
</li>
</ul>
</div>
</div

JS脚本

Code
function plusAddress(){
  try{
  document.getElementById("ctl00_ContentPlaceHolder1_divPlusAddress").style.visibility="visible";
  document.getElementById("ctl00_ContentPlaceHolder1_TextBox1").value="";
  document.getElementById("ctl00_ContentPlaceHolder1_TextBox2").value=""}
  catch(e){alert(e);}}
function callSrv(url,callBack){
  var xmlHttpObj=getxmlHttpObj();
  xmlHttpObj.onreadystatechange=state_Change;
  function state_Change(){
   if(xmlHttpObj.readyState==4&&xmlHttpObj.status==200){
   callBack(xmlHttpObj);}}
xmlHttpObj.open("GET",url,false);
xmlHttpObj.send(null);}
function btnCancel(){
document.getElementById("ctl00_ContentPlaceHolder1_divPlusAddress").style.visibility="hidden";}
function checkAddress(){
  var isExit=false;
  if(document.getElementById("ctl00_ContentPlaceHolder1_TextBox1").value==""){
  alert('地址不能为空');
  return false;}
  this.callBack=function(_xmlHttp){
  try{
    if(_xmlHttp.responseText=='Existed')
     alert('此地址已存在');
     else{isExit=true;}}
  catch(e){alert(e);}finally{}}
callSrv("../CheckAddress.ashx?strID="+document.getElementById("ctl00_ContentPlaceHolder1_TextBox1").value,this.callBack);
return isExit;}function getxmlHttpObj(){
   var xmlHttp=null;
    var activeKey = new Array("MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP");
    if(window.ActiveXObject){
       for(var i=0;i<activeKey.length;i++){
          try{
            xmlHttp = new ActiveXObject(activeKey[i]);
            if(xmlHttp!=null)
             return xmlHttp;}
          catch(error){
              throw new Error("Your browser does not support ajax");}}}
    else if(window.XMLHttpRequest){
       xmlHttp = new XMLHttpRequest();}
    return

ashx就不贴了，

这是本人第一个用XmlHttpRequest 实现的Ajax程序，本程序是对公司的老系统进行改造，时间有限只应用Ajax进行验证，通过后直接调用PostBack进行处理。

思路：设置div runat="server" 样式 visibility="hidden" 使用 asp:Button 添加 OnClientClick事件，验证使用的是Ajax,当通过所有验证，则执行Button的OnClick服务端事件。

其中验证的Ajax代码写的非常乱，即不是面向对象也不是面向过程，这就是javaScript。。。

转载于:https://www.cnblogs.com/yinhaiming/archive/2009/03/19/1416760.html