Home思洋影视事业部网站建设知识库
0 Comments

Javascript巧妙解决img做网站异常提交问题(1)

发布于：2013-12-05  |   作者：广州网站建设  |   已聚集：人围观

本文向大家描述一下使用javascript巧妙操作img做网站异常提交，表如果要实现单提交数据到服务器A，如果服务器A访问不了就提交到服务器B，利用js操作img来处理完成是个不错的选择。

使用javascript巧妙操作img做网站异常提交

如果要实现表单提交数据到服务器A，如果服务器A访问不了就提交到服务器B，使用JS实现上面的所讲功能，要考虑跨域问题，有使用过ajax的xmlhttp方法检测远程文件不存在返回404的方案，这种方案在测试时由于ajax存在跨域问题，所以就不采用了，也使用过img的onerror与onload事件这种方案来处理，但是这种方案会造成提交表单IE会弹窗，浏览器又拦截了弹窗，所以又不采用此方案，哪怎么办呢？搞得挺久，最终还是利用js操作img来处理完成，下面是具体步骤。
广州网站建设,网站建设,广州网页设计,广州网站设计

第1步、创建一个test.htm文件

内容如下：



    
	
  1. 
		<html> 
    2. 
	
  2. 
		<scriptsrcscriptsrc="getMessage.js"></script> 
    3. 
	
  3. 
		<body> 
    4. 
	
  4. 
		<formnameformname="mfrm"> 
    5. 
	
  5. 
		<inputidinputid="SendType" 
    6. 
	
  6. 
		type="hidden"value="s129"name="SendType"/> 
    7. 
	
  7. 
		<inputidinputid="title"name="title"/> 
    8. 
	
  8. 
		<inputonClickinputonClick="returngetMessage(this.form);
    9. 
	
  9. 
		"type="button"name="imageField"/> 
    10. 
	
  10. 
		</form> 
    11. 
	
  11. 
		</body> 
    12. 
	
  12. 
		</html> 
    13. 




	第2步：创建getMessage.js文件



	内容如下：




    
	
  1. 
		functiongetMessage(frm){  
    2. 
	
  2. 
		varsendtype=frm.SendType;  
    3. 
	
  3. 
		vartitle=frm.title;  
    4. 
	
  4. 
		//创建模拟form表单  
    5. 
	
  5. 
		varobjfrm=document.createElement("form");  
    6. 
	
  6. 
		varobjsendtype=document.createElement("input");  
    7. 
	
  7. 
		varobjtitle=document.createElement("input");  
    8. 
	
  8. 
		//利用操作img来处理目标接收数据的服务器页面  
    9. 
	
  9. 
		varobjImg=document.createElement("img");  
    10. 
	
  10. 
		objImg.id="TmpSmsImg";  
    11. 
	
  11. 
		objImg.src="http://www.xueit.com/images/logo.gif";  
    12. 
	
  12. 
		//默认服务器A图片  
    13. 
	
  13. 
		document.body.appendChild(objImg);  
    14. 
	
  14. 
		varimgWidth=document.getElementById("TmpSmsImg").width;  
    15. 
	
  15. 
		document.body.removeChild(objImg);  
    16. 
	
  16. 
		 
    17. 
	
  17. 
		if(imgWidth=="210")  
    18. 
	
  18. 
		//如果图片存在，就可以获取到宽度等于预定值，  
    19. 
	
  19. 
		默认接收数据的服务器A的页面  
    20. 
	
  20. 
		{  
    21. 
	
  21. 
		objfrm.action="http://www.xueit.com/testGet.aspx";  
    22. 
	
  22. 
		}  
    23. 
	
  23. 
		else//图片不存在，另一台接收数据的服务器B的页面  
    24. 
	
  24. 
		{  
    25. 
	
  25. 
		objfrm.action="http://demo.xueit.com/testGet.aspx";  
    26. 
	
  26. 
		}  
    27. 
	
  27. 
		 
    28. 



			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机