Javascript操作img解决网站提交数据异常问题

本文和大家重点讨论一下使用Javascript巧妙操作img做网站异常提交数据处理，通过两步就可以实现表单提交数据到服务器A，如果服务器A访问不了就提交到服务器B功能，具体内容请看下文详细介绍。

使用Javascript巧妙操作img做网站异常提交数据处理

本文要做的功能效果如下：

表单提交数据到服务器A，如果服务器A访问不了就提交到服务器B

要使用JS实现上面的所讲功能，要考虑跨域问题，有使用过ajax的xmlhttp方法检测远程文件不存在返回404的方案，这种方案在测试时由于ajax存在跨域问题，所以就不采用了，也使用过img的onerror与onload事件这种方案来处理，但是这种方案会造成提交表单IE会弹窗，浏览器又拦截了弹窗，所以又不采用此方案，哪怎么办呢？搞得挺久，最终还是利用js操作img来处理完成。
也许说了这么多，你还看不懂我所表达的意思，暂不管这些，下面看代码你就清楚了。

第1步、创建一个test.htm文件，内容如下：

Code

 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
value="s129"name="SendType"/>
  
  
  
  
  
  
  
  
  
type="button"name="imageField"/>

第2步：创建getMessage.js文件，内容如下：

Code

 
 
 
  
  
  functiongetMessage(frm){ 
  
  
  varsendtype=frm.SendType; 
  
  
  vartitle=frm.title; 
  
  
  //创建模拟form表单 
  
  
  varobjfrm=document.createElement("form"); 
  
  
  varobjsendtype=document.createElement("input"); 
  
  
  varobjtitle=document.createElement("input"); 
  
  
  //利用操作img来处理目标接收数据的服务器页面 
  
  
  varobjImg=document.createElement("img"); 
  
  
  objImg.id="TmpSmsImg"; 
  
  
  objImg.src="http://www.xueit.com/images/logo.gif";
  
  
  //默认服务器A图片 
  
  
  document.body.appendChild(objImg); 
  
  
  varimgWidth=document.getElementById("TmpSmsImg").width; 
  
  
  document.body.removeChild(objImg); 
  
  
  
  
  
  if(imgWidth=="210")//如果图片存在，
  
  
  就可以获取到宽度等于预定值，默认接收数据的服务器A的页面 
  
  
  { 
  
  
  objfrm.action="http://www.xueit.com/testGet.aspx"; 
  
  
  } 
  
  
  else//图片不存在，另一台接收数据的服务器B的页面 
  
  
  { 
  
  
  objfrm.action="http://demo.xueit.com/testGet.aspx"; 
  
  
  } 
  
  
  
  
  
  //下面是表单的属性 
  
  
  objfrm.id="TmpForm"; 
  
  
  objfrm.name="TmpForm"; 
  
  
  objfrm.target="_blank"; 
  
  
  objfrm.method="post"; 
  
  
  objfrm.style.display="none"; 
  
  
  
  
  
  objsendtype.type="hidden"; 
  
  
  objsendtype.name="SendType"; 
  
  
  objsendtype.value=Utf2Gb(sendtype); 
  
  
  
  
  
  objtitle.type="hidden"; 
  
  
  objtitle.name="title"; 
  
  
  objtitle.value=Utf2Gb(title); 
  
  
  
  
  
  //附加 
  
  
  objfrm.appendChild(objsendtype); 
  
  
  objfrm.appendChild(objtitle); 
  
  
  
  
  
  //表单提交 
  
  
  document.body.appendChild(objfrm); 
  
  
  objfrm.submit(); 
  
  
  document.body.removeChild(objfrm); 
  
  
  
  
  
  //clearobj 
  
  
  objtitle=null; 
  
  
  objsendtype=null; 
  
  
  objfrm=null; 
  
  
  
  
  
  } 
  
  
  
  
  
  //处理编码函数 
  
  
  functionUtf2Gb(str) 
  
  
  { 
  
  
  if(str!=null&&str!="") 
  
  
  str=escape(str); 
  
  
  returnstr; 
  
  
  }

以上代码主要是利用img图片，如果图片所在服务器正常运行的话，图片会加载到当前页面的body区域中，所以再获取这个img图片的宽度，如果宽度等于你知道的预定值，就代表默认服务器正常，否则代码服务器A不正常，就把数据提交到服务器B处理。

分享文章：Javascript操作img解决网站提交数据异常问题
本文URL：http://www.shufengxianlan.com/qtweb/news10/377610.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容