display:none的form无法使用ajax传递参数吗？

iou3344 2016-02-23 03:14:43



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Lightbox Evolution</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<meta name="robots" content="index, follow" />

<script type="text/javascript" src="http://www.aerowebstudio.net/codecanyon/jquery.lightbox/js/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://www.aerowebstudio.net/codecanyon/jquery.lightbox/js/lightbox/themes/default/jquery.lightbox.css" />

<script type="text/javascript" src="http://www.aerowebstudio.net/codecanyon/jquery.lightbox/js/lightbox/jquery.lightbox.min.js"></script>



<script type="text/javascript">

jQuery(document).ready(function($){

$('.lightbox').lightbox();

});

</script>

<style>

#searchall{display:none}

.searchtab {

font-size: 100%;

font-family: "Ubuntu", sans-serif;

color: #333333;

background-color: #F6F7FA;

width:100%;

padding:0px;

margin-top:5px;

}

.searchtab table{border-collapse:collapse;width:600px;}

.searchtab table tr{height:35px;line-height:35px;}

.head1 {background: #ffffff;border:1px solid #E1E4EE;width:150px;color: #3f4258;font-size:16px;text-align:right;padding-right:18px;font-weight:bold;font-family:"微软雅黑";}

.head2 {background: #F6F7FA;border:1px solid #E1E4EE;width:150px;color: #3f4258;font-size:16px;text-align:right;padding-right:18px;font-weight:bold;font-family:"微软雅黑";}

.tab1 {background: #ffffff;border:1px #E1E4EE solid;width:650px;}

.tab2 {background: #F6F7FA;border:1px #E1E4EE solid;width:650px;}

.searchtab input{height:35px;line-height:35px;width:99%;border:0;text-align:left;padding-left:5px;vtical-align:middle;background-color:transparent;font-size:16px;color:#6B758D;font-weight:bold;font-family:"微软雅黑";}



</style>

</head>

<body>

<form id="searchall" name=form1 method="get" target="_blank" action="aaaaaaaaa.asp">

<table class="searchtab">

<tr><td class="head1">标题</td><td class="tab1"><input type="text" name="title" value=''></td></tr>

<tr><td class="head1">演员</td><td class="tab2"><input type="text" name="actor" value=''></td></tr>

</table>

<div style="margin: auto;width: 200px;margin-top:10px;text-align: center;">

<input type="submit" value="查找" onclick="return submit2other();" class="button gray" style="width:100px;text-align: center;height:35px;line-height:35px;vtical-align:middle;">

</div>

</form>



<a href="?lightbox[width]=644&lightbox[height]=165#searchall" class="lightbox" style="color:rgb(119, 119, 119)"><i class="fa fa-fw fa-magic"></i>按钮</a>



<script>

function submit2other(){

	//var ui = document.getElementById("searchall");

     	//ui.style.display="block";

   if(window.XMLHttpRequest){

      var xmlhttp=new XMLHttpRequest();

   }else if(window.ActiveXObject){

      try{

         var xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");

      }catch(e){

         try{

            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

         }catch(e){

            return false;

         }

      }

   }else{

      return false;

   }

   postd="title="+form1.title.value+"&actor="+form1.actor.value;

   xmlhttp.open("POST","bbbbbbbbbb.asp",true);

   xmlhttp.setRequestHeader("Content-Length",postd.length);

   xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

   xmlhttp.send(postd);

   return true;

}

</script>

核心问题就是：id="searchall"的form原本是隐藏的(display:none)，通过按钮的lightbox功能可以把该DIV显示出来之后并直接提交给aaaaaaaaa.asp的同时，想通过ajax把表单的数据提交给bbbbbbbbbb.asp，但此时却时发现无效：aaaaaaaaa.asp可以获取到表单数据而bbbbbbbbbb.asp无法获取表单数据。

相反的，如果我们直接去掉searchall表单的display:none属性（也就是不隐藏表单），则此时表单的数据可以同时成功的传递给aaaaaaaaa.asp（直接传递）和bbbbbbbbbb.asp（ajax传递）。

#searchall{display:none}

<input type="submit" value="查找" onclick="return submit2other();" >

postd="title="+form1.title.value+"&actor="+form1.actor.value;
xmlhttp.open("POST","bbbbbbbbbb.asp",true);
xmlhttp.setRequestHeader("Content-Length",postd.length);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(postd);
return true;

bbbbbbbbbb.asp 接收参数代码



<%

title	=	trim(request("title"))

actor	=	trim(request("actor"))

%>

而我由于项目的要求，只能先隐藏该表单，那么对于这样隐藏的form就不能用ajax传递参数了吗？还是我写的不对呢？

...全文

372 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

iou3344 2016-02-23

打赏
举报

引用 1 楼 qq_20473793的回复:

既然用了jquery，为什么不用jquery.ajax，把form转成json传递到后台呢？

对不起，我是菜鸟，对你说的只是听说，而不会写啊！另外，你说的这个东西确定可以不在乎form是否隐藏吗？

qq_20473793 2016-02-23

打赏
举报

既然用了jquery，为什么不用jquery.ajax，把form转成json传递到后台呢？

iou3344 2016-02-23

打赏
举报

引用 3 楼 showbo 的回复:

lightbox将dom拷贝放入层中了，会出现2个id一样的dom，你直接用id时form1就是DOM数组了，而不是表单对象，该这样。 <input type="submit" value="查找" onclick="return submit2other(this.form);" function submit2other(form1) {

居然让版主大人出手了，一出手就知有没有，强！！！！

Go 旅城通票 2016-02-23

打赏
举报

lightbox将dom拷贝放入层中了，会出现2个id一样的dom，你直接用id时form1就是DOM数组了，而不是表单对象，该这样。 <input type="submit" value="查找" onclick="return submit2other(this.form);" function submit2other(form1) {