Chinaunix首页 | 论坛 | 博客

Janny' Homeailsa.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

cjjchong

  • 博客访问： 730314
  • 博文数量： 119
  • 博客积分： 137
  • 博客等级： 少校
  • 技术积分： 1582
  • 用 户 组： 普通用户
  • 注册时间： 2010-04-28 16:39
文章分类

全部博文（119）

文章存档

2017年（3）

2016年（7）

2014年（1）

2013年（8）

2012年（20）

2011年（27）

2010年（53）

我的朋友
最近访客
推荐博文
相关博文
HTML使用iframe无刷新提交数据并显示返回结果

分类： 系统运维

2012-05-24 18:09:10

1. 登陆页面自动提交，提交后无刷新
2. 显示提交是否成功
3. 显示服务器返回结果



  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
  2. <html>
  3.  <head>
  4.   <title> New Document </title>
  5.   <meta name="Generator" content="EditPlus">
  6.   <meta name="Author" content="">
  7.   <meta name="Keywords" content="">
  8.   <meta name="Description" content="">
  9.  </head>

  11. <script type="text/javascript">


  14. var xmlHttp = false;
  15. try {
  16.     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  17. } catch (e) {
  18.     try {
  19.          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  20.     } catch (e2) {}
  21. }

  23. if (!xmlHttp && typeof XMLHttpRequest != "undefined") {
  24.     try {
  25.         xmlHttp = new XMLHttpRequest();
  26.     } catch(e3){
  27.         xmlHttp = false;
  28.     }
  29. }


  32. function createKbQueryString(){

  34.     var phone = document.getElementsByName("phone").value;
  35.     var macaddress = document.getElementsByName("macaddress").value;
  36.     var additional_1 = document.getElementsByName("additional_1").value;
  37.     var additional_2 = document.getElementsByName("additional_2").value;
  38.     var additional_3 = document.getElementsByName("additional_3").value;
  39.     var validate = document.getElementsByName("validate").value;
  40.   
  41.     KbqueryString = "phone=" + phone + "&macaddress=" + macaddress + "&additional_1=" + additional_1 + "&additional_2=" + additional_2 + "&additional_3=" + additional_3 + "&validate=" + validate;
  42.     return KbqueryString;
  43. }

  45. function KbRequestQueryPOST(){
  46.         var url = "";
  47.         var KbqueryString = createKbQueryString();        
  48.         xmlHttp.open("post",url,true);
  49.         xmlHttp.onreadystatechange = handleStateChangeKb;
  50.         xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  51.         xmlHttp.send(KbqueryString);
  52. }

  54. function handleStateChangeKb(){
  55.         if(xmlHttp.readyState == 4){
  56.                 var responseSpanKb = document.getElementById("serverResponseKb");
  57.                 responseSpanKb.innerHTML = "请稍等…";
  58.                 if(xmlHttp.status == 200){
  59.                         var ResponseKbJSON = unescape(xmlHttp.responseText);
  60.                         switch (ResponseKbJSON){
  61.                            case "Bad1":
  62.                                  responseSpanKb.innerHTML = "HTTP Code:" + xmlHttp.status + " 内容不能为空";
  63.                                  document.getElementById("offerId1").innerHTML = ResponseKbJSON;
  64.                                  break
  65.                            case "Bad2":
  66.                                  responseSpanKb.innerHTML = "HTTP Code:" + xmlHttp.status + " 可能所填不全,或接口问题,未通过校验";
  67.                                  document.getElementById("offerId1").innerHTML = ResponseKbJSON;
  68.                                  break
  69.                            case "Bad3":
  70.                                  responseSpanKb.innerHTML = "HTTP Code:" + xmlHttp.status + " 获取远程数据出错(可能是不能连接外网)";
  71.                                  document.getElementById("offerId1").innerHTML = ResponseKbJSON;
  72.                                  break
  73.                            default:
  74.                                  document.getElementById("offerId1").innerHTML = ResponseKbJSON;
  75.                                  responseSpanKb.innerHTML = "HTTP Code:" + xmlHttp.status + " 恭喜：提交成功";
  76.                         }
  77.                 }else{
  78.                         responseSpanKb.innerHTML = "HTTP Code:" + xmlHttp.status + "被请求页面异常(程序出错或局域网问题)";
  79.                 }
  80.         }
  81. }

  83. function formSubmit()
  84. {
  85.     document.forms.FON.onsubmit();
  86. }

  88. //-->
  89. </script>
  90. <body onload="formSubmit()">

  92. <form name="FON" action="" style="display:none;" method="post" target="post_frame" enctype="multipart/form-data" onsubmit="KbRequestQueryPOST()">
  93. <iframe name='post_frame' id="post_frame" style="display:none;" mce_style="display:none;"></iframe>
  94.     <input type="text" name="phone" maxlength="120" value="1234567890"/><br />
  95.     <input type="text" name="macaddress" maxlength="120" value="11-22-33-44-55-66" /><br />
  96.     <input type="text" name="additional_1" maxlength="120" value="7ef44706c65938ceb87c814e844679dc5edf1c9c30de4b6d5af4504b4e6a7a8d" /><br />
  97.     <input type="text" name="additional_2" maxlength="120" value="V2" /><br />
  98.     <input type="text" name="additional_3" maxlength="120" value="RES" /><br />
  99.     <input type="text" name="validate" value="2012-05-20" />
  100.     <input type='submit' value='Enviar' >
  101. </form>


  104. <br><br><br><br>
  105. <font id='offerId1' name="offerId1" ></font>
  106. <br><br><br><br>
  107. <font id='serverResponseKb'></font>

  109. </body>
  110. </html>


阅读(2644) | 评论(0) | 转发(0) |
0

上一篇：工作中遇到的页面弹出问题，解决办法

下一篇：嵌入式https/http兼容客户端的c语言实现

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6