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

本文和大家重点讨论一下使用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

<html> 
<scriptsrcscriptsrc="getMessage.js"></script> 
<body> 
<formnameformname="mfrm"> 
<inputidinputid="SendType"type="hidden"  
value="s129"name="SendType"/> 
<inputidinputid="title"name="title"/> 
<inputonClickinputonClick="returngetMessage(this.form);"
type="button"name="imageField"/> 
</form> 
</body> 
</html>

第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处理。

【编辑推荐】