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

最新推荐文章于 2020-06-04 11:26:04 发布
最新推荐文章于 2020-06-04 11:26:04 发布
阅读量253 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42536375/article/details/80798714
版权

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

 

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

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

Code
 

 

  1. functiongetMessage(frm){ 
  2. varsendtype=frm.SendType; 
  3. vartitle=frm.title; 
  4. //创建模拟form表单 
  5. varobjfrm=document.createElement("form"); 
  6. varobjsendtype=document.createElement("input"); 
  7. varobjtitle=document.createElement("input"); 
  8. //利用操作img来处理目标接收数据的服务器页面 
  9. varobjImg=document.createElement("img"); 
  10. objImg.id="TmpSmsImg"; 
  11. objImg.src="http://www.xueit.com/images/logo.gif";
  12. //默认服务器A图片 
  13. document.body.appendChild(objImg); 
  14. varimgWidth=document.getElementById("TmpSms足球平台出租Img").width; 
  15. document.body.removeChild(objImg); 
  17. if(imgWidth=="210")//如果图片存在，
  18. 就可以获取到宽度等于预定值，默认接收数据的服务器A的页面 
  19. { 
  20. objfrm.action="http://www.xueit.com/testGet.aspx"; 
  21. } 
  22. else//图片不存在，另一台接收数据的服务器B的页面 
  23. { 
  24. objfrm.action="http://demo.xueit.com/testGet.aspx"; 
  25. } 
  27. //下面是表单的属性 
  28. objfrm.id="TmpForm"; 
  29. objfrm.name="TmpForm"; 
  30. objfrm.target="_blank"; 
  31. objfrm.method="post"; 
  32. objfrm.style.display="none"; 
  34. objsendtype.type="hidden"; 
  35. objsendtype.name="SendType"; 
  36. objsendtype.value=Utf2Gb(sendtype); 
  38. objtitle.type="hidden"; 
  39. objtitle.name="title"; 
  40. objtitle.value=Utf2Gb(title); 
  42. //附加 
  43. objfrm.appendChild(objsendtype); 
  44. objfrm.appendChild(objtitle); 
  46. //表单提交 
  47. document.body.appendChild(objfrm); 
  48. objfrm.submit(); 
  49. document.body.removeChild(objfrm); 
  51. //clearobj 
  52. objtitle=null; 
  53. objsendtype=null; 
  54. objfrm=null; 
  56. } 
  58. //处理编码函数 
  59. functionUtf2Gb(str) 
  60. { 
  61. if(str!=null&&str!="") 
  62. str=escape(str); 
  63. returnstr; 
  64. } 
 

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

您可能感兴趣的文章:
 
大部分人没用过的JS页面模板化_0
                

        

        

    

  


    

      

        

            

              
                
                  qq_42536375
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
【京东电商网站主界面仿写——HTML第八部分】| 系统架构师 面试：如何解决分布式系统中的数据一致性问题？请介绍一些常见的一致性协议。

				
			

			

				

					追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
				

				

					11-20
					
					436
					
				

			

		

		

			
				
由于这个项目整体的代码较长，所以分成几个部分给大家展示。
比较完整的效果在这里~~【京东网站主界面仿写——使用Html5+CSS3+JavaScript等实现(附源代码和效果)，挺炫的喔~~~】
这里先展示第一部分，关于HTML主页界面代码。
这里是主界面显示的第3051行到第3700行代码。鉴于仅HTML代码行数就已经超过4000行，所以分成多个博客展示哈！系统架构师 面试：如何解决分布式系统中的数据一致性问题？请介绍一些常见的一致性协议。

			
		

	



                

              
                



	

		

			

				
					
JAVAWEB开发之SpringMVC详解(二)——高级开发、数据回显、参数绑定集合、图片上传、json交互、validation校验、异常处理、RESTful支持、拦截器

				
			

			

				

					
				

				

					06-25
					
					4205
					
				

			

		

		

			
				
知识回顾
springmvc框架
用户请求url到DispatcherServlet前端控制器，相当于中央调度器，降低系统各组件之间的耦合度。
DispatcherServlet前端控制器通过HandlerMapping处理器映射器根据url找到Handler。
DispatcherServlet前端控制器通过HandlerAdapter处理器适配器执行Handler。
Dispatch

			
		

	



                


  
              

                


	

		

			

				
					
JS img error 对未显示的图片进行操作

				
			

			

				

					Eric专栏
				

				

					12-17
					
					4907
					
				

			

		

		

			
				
当图片不存在时，会自动获取自定义图片

			
		

	





	

		

			

				
					
JavaScript实现图片上传并预览并提交

				
			

			

				

					入门菜鸟程序员的成长
				

				

					02-18
					
					1742
					
				

			

		

		

			
				
学习一下思路，上传部分可以用vue对象方法和axios代替

图片上传并预览



HTML


&lt;div class="file-box"&gt;
    &lt;img id="preview" /&gt;
    &lt;input type="text" id="imgfield" class="txt" placeholder="预览&quot

			
		

	



		

			
		



	

		

			

				
					
JS中错误处理

				
			

			

				

					weixin_30740581的博客
				

				

					11-26
					
					114
					
				

			

		

		

			
				
1 错误类型

  1.  Error  是基本类型  其他错误都继承该类型
  2. EvalError        使用eval（）函数时发生异常
  3. RangeError
  4. ReferenceError 找不到对象的情况下（导致object  expected  ），访问不存在的对象的时发生
  5. SyntaxError   语法错误
  6. TypeEr...

			
		

	





	

		

			

				
					
img图片请求失败后的处理

				
			

			

				

					weixin_44849078的博客
				

				

					05-13
					
					3997
					
				

			

		

		

			
				
视频与图片（video与img）请求失败后的处理1、onerror 事件监听2、onerror弊端的解决，优化写法3、背景图片
前端使用video与img标签时，有时候会遇到加载失败的情况，造成失败的原因有很多，网络问题、路径错误、资源已被删除等，img会显示一个裂图，video则没有任何提示，因此从用户体验上来说，需要进行处理，常用的是用准备好的一张图片来提示用户图片或者视频加载失败。
不做任何...

			
		

	





	

		

			

				
					
微信小程序加载图片报错

				
			

			

				

					笑到世界都狼狈的博客
				

				

					06-04
					
					2471
					
				

			

		

		

			
				
刚开始学习小程序，对很多东西还不是很熟悉，页面写了个图片，加载不出来，一直报错：

VM436:1 Failed to load local image resource /pages/images/1.jpg the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)

找了一下解决的办法，差不多都是说加个wx:if就好了


<image wx:if='{{news.poster}}' src="{{

			
		

	





	

		

			

				
					
JavaScript连接MySQL数据库的常见问题解答：快速解决疑惑，提升效率

				
			

			

				

					
				

			

		

		

			
				
[JavaScript连接MySQL数据库的常见问题解答：快速解决疑惑，提升效率](https://img-blog.csdnimg.cn/20200404092824966.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG...

			
		

	





	

		

			

				
					
前后端数据交互秘籍：在JavaScript中管理API调用与数据删除

				
			

			

				

					
				

			

		

		

			
				
[js删除 数据数据库数据结构](https://www.freecodecamp.org/news/content/images/2021/04/JavaScript-splice-method.png) # 1. JavaScript中的API调用基础  在当今的Web开发中，API调用已成为应用程序获取数据、...

			
		

	





	

		

			

				
					
解决网站登录跳转问题的有效途径

				
			

			

				

					
				

			

		

		

			
				
![解决网站登录跳转问题的有效途径]...# 1. 深入分析网站登录跳转问题  ### 1.1 什么是网站登录跳转问题  在网站开发中，登录跳转问题是指用户在进行登录操作时，所遇到的页面跳转逻辑不明确或错误导致跳转失败的情况...

			
		

	





	

		

			

				
					
李炎辉视频0.6 头像取值--表单不能发送img的src

				
			

			

				

					任重道远
				

				

					05-12
					
					194
					
				

			

		

		

			
				
一、头像取值，如下，在子窗体上点击头像，改变父窗体上的那个头像                 方法一：            (能行，但是有点过时了，因为还是用的onclick这种)            1）在子窗体上的&lt;img /&gt;加一个点击事件，点击的时候调用一个函数并把拿到的src传入                        2）写opener函数，接受传入的src,拿...

			
		

	





	

		

			

				
					
使用JS在浏览器中判断当前网络连接状态的几种方法

				
			

			

				

					大灰狼的小绵羊哥哥的博客
				

				

					09-15
					
					1万+
					
				

			

		

		

			
				
使用JS在客户端判断当前网络状态
http://miaoyunze.com/2017/05/04/network-status-check/?utm_source=tuicool&utm_medium=referral




1.
 navigator.onLine
2.
 ajax请求
3.
 获取网络资源
4.
 window.addEventListener()


			
		

	





	

		

			

				
					
关于上报错误最简单的实现方式--利用图片

				
			

			

				

					weixin_33978016的博客
				

				

					08-21
					
					424
					
				

			

		

		

			
				
为什么80%的码农都做不了架构师？>>> 
                                        
                ...

			
		

	





	

		

			

				
					
前端JS请求网络图片报错GET https://xxx.png 404 (Not Found)的解决办法

					
热门推荐

				
			

			

				

					前端一线搬运工的博客
				

				

					02-19
					
					2万+
					
				

			

		

		

			
				
需求:

有时候我们请求图片报如下错误:



解决办法:

这里我用百度的图片举个栗子,当你发现如下错误:


GET https://www.baidu.com/image/online.png 404 (Not Found) 


 说明了网络图片请求失败或者说不存在,则在img中添加onerror事件:


&lt;img src="https://www.baidu.com/image/...

			
		

	





	

		

			

				
					
四种常见的 POST 提交数据方式对应的 content-type 取值

				
			

			

				

					qq_36196358的博客
				

				

					08-30
					
					7105
					
				

			

		

		

			
				
application/x-www-form-urlencoded 

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）： 

POST http://www.example.co

			
		

	





	

		

			

				
					
JS图片error事件绑定不生效

				
			

			

				

					qq_34101232的博客
				

				

					04-04
					
					843
					
				

			

		

		

			
				
想要达到的效果:

	当图片加载异常时, 修改img的src显示默认的失败图片.
	
	
	下面是前端代码.

	
		
<html>
<head>
...
</head>
<body>

    ...

    <img src="${pageContext.request.contextPath}/personalInfo/showH...

			
		

	





	

		

			

				
					
渗透测试XSS跨站漏洞input输入js特殊字符过滤

				
			

			

				

					a1604914398的博客
				

				

					05-09
					
					5631
					
				

			

		

		

			
				
修复建议：建议对用户得输入与输出进行过滤，过滤一些比较危险得标签和关键字，如<script></script>、alert等

代码如下：在input输入框加入onblur事件；定义onblur="checkText('id',this.value)"；id为文本框DOMid属性


//验证文本框输入特殊字符
function checkText(id,text){/...

			
		

	





	

		

			

				
					
解除劳动合同五大热点问题及裁员概述.ppt

					
最新发布

				
			

			

				

					09-14
				

			

		

		

			
				
解除劳动合同五大热点问题及裁员概述.ppt

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值