我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

这篇文章将为大家详细讲解有关Javascript操作img如何解决网站提交数据异常问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

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

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

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

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

Code

<html> <scriptclass="lazy" data-srcscriptclass="lazy" data-src="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.class="lazy" data-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;  }

关于“Javascript操作img如何解决网站提交数据异常问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

如何解决网站出现问题Linux重启oracle数据库

本篇内容介绍了“如何解决网站出现问题Linux重启oracle数据库”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  网站的服务中断了,重启
2023-06-13

C#开发中如何处理集合和数据结构的操作问题及解决

C#开发中如何处理集合和数据结构的操作问题及解决,需要具体代码示例在C#开发中,处理集合和数据结构的操作问题是非常常见的。正确地处理这些问题可以提高代码的效率和可读性。本文将讨论一些常见的集合和数据结构操作问题,并给出相应的解决方案和代码示
2023-10-22

C#开发中如何处理集合和数据结构的操作问题及解决方法

C# 开发中如何处理集合和数据结构的操作问题及解决方法引言:在 C# 开发中,集合和数据结构是非常重要的概念。它们可以帮助我们组织和管理数据,提高程序的效率和可维护性。然而,对于初学者来说,可能会遇到一些集合和数据结构的操作问题。本文将介绍
2023-10-22

编程热搜

目录