77家的会客厅2010

jQuery部分序列化表单
Weather:晴转阴,南风３－４级转北风３－４级,(1～8)℃
2008-03-03

在jQuery google(english)上看到的问题，整理了一下，想给回复，结果没回复成功，就回来写了。

有如下HTML代码，现在只想将row1那一行的表单元素进行serialize()，而其它的不想用。

 




  
  
  


  
  
  

 

 

 

其实就是一句话

$('#row1 :input').serialize()

Tag:jQuery  serialize  form  
Views(11184) | Comments(24) | In: 网页前端技术 |
历史上的今天： [2005/03/03]什么当春乃发生来着?什么春来发几枝来着?记不清啦...

[jQuery部分序列化表单]的回复

littlenew 于 2008-04-17 10:56:30 发表 | IP:218.18.209.*

如果是这样的话，那怎么写呢？

<table id="outcome">
<tr>
   <td>姓名</td>
   <td>支出</td>
   <td>原因</td>
</tr>
<tr>
   <td>大S</td>
   <td>￥123</td>
   <td>买了一个大包</td>
</tr>
<tr>
   <td>小S</td>
   <td>￥183</td>
   <td>买了一个小包</td>
</tr>
<tr>
   <td>SHE</td>
   <td>￥323</td>
   <td>买了个大小包</td>
</tr>
</table>

每个TR上要加ID吗？

柠檬园主 于 2008-04-17 13:08:44 发表 | IP:116.3.2.*

可以啊，因为本来就是定制选择，加上ID最好了，如果不想加，也可以用

$('table tr:nth-child(2) :input').serialize();

其中的2表示第二个tr

littlenew 于 2008-05-30 09:32:17 发表 | IP:218.18.129.*

  <script language="javascript" src="jquery-1.2.3.js"></script>
  <table id="outcome" border="1">
    <tr><td>姓名</td><td>支出</td> <td>原因</td></tr>
    <tr id="id3"><td>SHE</td><td>￥<input value="323"></td><td>买了个大小包</td></tr>
    <tr id="id1"><td>大S</td><td>￥<input value="123"></td><td>买了一个大包</td></tr>
    <tr id="id2"><td>小S</td><td>￥<input value="183"></td><td>买了一个小包</td></tr>
  </table>似乎不能实现按大小顺序排列。不管怎么加ID，就是不会按ID大小或input 值的大小排列。

似乎是把这些值按照ID顺序串连起来，并没有其它的功能了，不知这样理解对不对。


在此先谢谢了。

4#   柠檬园主 于 2008-05-30 11:25:51 发表 | IP:116.3.7.*

是的，你的理解是正确的，因为这儿是serialize，翻译成了序列化，而不是sort排序。这个功能只是把要取的值组合起来，并没有排序功能。

5#   littlenew 于 2008-07-03 09:03:18 发表 | IP:218.17.59.*

 data='<p id="a1">1</p><p id="a2">2</p>';

能不能从上面的变量中取出id=a1，用jquery来实现。

6#   柠檬园主 于 2008-07-04 02:42:23 发表 | IP:124.93.18.*

jQuery('p#a1',data)

jQuery('p[id=a1]',data)

7#   littlenew 于 2008-07-04 14:05:00 发表 | IP:218.18.129.*

1。弱弱的问一下，jQuery与$有什么区别？？

 2。 <script type="text/javascript" language="javascript">
   var  data = '<p id="a1">1</p><p id="a2">2</p>';
   var xx = jQuery('p#a1',data).html();
   alert(xx);
  </script>
 怎么不对呀，看了一下资料说是返回的是jQuery对象，但应该可以用.html()的吧。

麻烦解答一下，谢谢了。

8#   柠檬园主 于 2008-07-04 14:52:04 发表 | IP:221.201.154.*

$()是jQuery()的别称，返回的结果如果直接要取得纯文本就可以直接用.text()方法,而如果要取HTML,因为返回结果是个数组形式的jQuery对象,就得加下标.

9#   littlenew 于 2008-07-04 16:59:24 发表 | IP:218.18.129.*

  <script type="text/javascript" language="javascript">
   var  data = '<p id="a1">1</p><p id="a2">2</p>';
   var xx = $('p#a2',data).text();
   alert(xx);
  </script>
上面的小例子中，我用$('p:last',data).html()  $('p:last',data).text()都不行。

柠檬园主 能不能给我演示一下。搞了好半天了。依然得不到结果。

10#   littlenew 于 2008-07-10 09:01:43 发表 | IP:218.18.130.*

 今年雨水好，园主怎么不来这里看一下呢。

11#   柠檬园主 于 2008-07-10 09:15:23 发表 | IP:221.201.148.*

呃...漏掉了,上面那种用法似乎只能在对象是XML的时候才好用,这个我之前没注意到,因为我这么用的时候,服务器端返回的就是XML文档.

但你可以弄个隐藏的DIV,把VAR先用JQUERY给HTML(VAR)进去,再用HTML()取出来,再进行操作似乎就可行一些.

12#   littlenew 于 2008-07-10 16:54:16 发表 | IP:218.18.130.*

responseXML好像是可以这样的。不过我没有搞过XML，不知园主能不能做一个简单的演示。(估计这个对你来说应该不难吧，在这里经常看到你写和东西和XML相关的）

如果试成功的话，(独家)收藏 + (独家)转载。

 

13#   柠檬园主 于 2008-07-14 22:56:23 发表 | IP:124.93.18.*

如果服务器端本身返回的就是XML的话,是不用设置JQ的responseXML的,而针对XML的路径选择也是和HTML没什么区别的,就是一层层的找进去就行了,比如

$('root nod valuenod',resultXml).text()

这样就可以取值了.因为之前做过一个项目,服务器端返回的全部都是XML,而在客户端(浏览器)对XML进行XSLT转换,所以用上JQ的得天独厚的选择器,用起来真是龙飞凤舞啊.

而responseXML这个属性是针对服务器端返回值而言的,你在当前页面进行所有的操作应该不会起什么作用的.

14#   littlenew 于 2008-08-08 11:56:13 发表 | IP:218.17.61.*

有一个IE提交后正常，firefox提交后不正常的问题，搞不定它。如果你有时间的话，看一下（或者让其它人看一下也行）。http://bbs.blueidea.com/viewthread.php?tid=2877766&pid=4150726&page=1&extra=page%3D2#pid4150726

15#   柠檬园主 于 2008-08-08 15:14:34 发表 | IP:221.201.157.*

已经在那边回复了....

16#   littlenew 于 2008-08-12 09:13:53 发表 | IP:218.18.128.*

谢谢了，原来你在那里也有ID呀。。

服务器端取值：response.write(request.form("mutp").count)
IE提交后：正常。和页面插入的JS一致。
FF提交后：不正常。只显示页面默认的第一个<input name='mutp'>中的值.插入后的JS代码里的mutp值没有提交。

有点郁闷，如果实在搞不定的话，只能让客户用IE了。

17#   柠檬园主 于 2008-08-12 10:09:10 发表 | IP:221.201.151.*

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="Copyright" content="www.3rgb.com,All Rights Reserved,2008" />
<script type="text/javascript" src="inc/jquery-1.2.6.pack.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
    $('#btn1').click(function(){   
        if($("#tp > :input").length <10){
          var html = $("#tp").html();
          var temp = ($("#tp :text").length + 1) + '。<input type="text" name="mutp" maxlength="100" style="width: 300px;"><br>';
          //html = html + temp;
          //$("#tp").html(html);
          $("#tp").append(temp);
        }else {
          alert("最多可以添加10项投票。");
        }
    });
});
//-->
</script>
</head>
<body>
<form id="text1" name="text1" action="test.asp" method="post">
<div id="tp" style="padding: 0px 0px 0px 50px;">
     1。<input type="text" name="mutp" maxlength="100" style="width: 300px;"><br>
   </div>
<input type="submit" id="submit" value="submit" />
</form>
<input type="button" id="btn1" value="add item" />
<div style="color:red">
<%=request.form("mutp").count%>
</div>
</body>
</html>

上面这段代码在FF里是好用的.

18#   littlenew 于 2008-10-22 15:33:58 发表 | IP:219.133.91.*

<form>

   <table>……</table>

</form>

与

<table>

  <form>

     <tr><td>……</td></tr>

</form>

</table>

区别很大吗？

我反复的查找，就是没有查找到原因。原来问题出在这里。你知道这是为什么嘛？

19#   柠檬园主 于 2008-10-22 17:18:02 发表 | IP:116.3.11.*

问题出在外观上会不一样，用第一种的话由于FORM在外层，所以看起来表格外面又多了一层空白。而用第二种，就不会因为FORM而形成多余的空白。

而在数据提交上，没什么区别的。

20#   littlenew 于 2008-10-22 21:31:58 发表 | IP:116.24.67.*

问题就出在这里，我试了几次移出来之后马上就正常了。

奇怪吧。

21#   柠檬园主 于 2008-10-22 23:25:20 发表 | IP:124.93.19.*

你是不是用的AJAX提交?然后用的是选择器$('form > input:text')这样的?

那是因为$(parent > child)这样的选择器是只选父级下面一级的内容,而$(parent child)是选择父级下面任意级(即所有)的子元素.

这样讲明白了吧?

22#   littlenew 于 2008-10-23 09:38:32 发表 | IP:219.133.91.*

1。不是ajax提交的。只是普通的表单提交。

2。不解的是无论如何改动，IE始终正常，但将表单写在最外面于是FF也就正常了。

3。又学了一招，原来 $(parent > child)与$(parent child)是不一样的。哈哈。

23#   littlenew 于 2008-10-23 22:56:04 发表 | IP:116.24.67.*

对了，我用的是IE6，不是IE7。

奇怪吧，赶快收藏起来吧。

我的疑问在于为什么两个浏览器对html的表单提交（后台取值）也有不同的解释，但表现出来的却是相同的。

24#   littlenew 于 2011-01-14 23:11:45 发表 | IP:113.91.238.*
园主，记得你对XML挺熟悉的，有点问题还请指点一下。
http://topic.csdn.net/u/20110104/21/2479647e-2483-431e-946e-b90b5edb570f.html?seed=1355718311&r=71030520

原来发在你的留言板上了，发现似乎有spam，只能搬到这里来了。
望博主见谅！
Post a Comment~
CopyLeft: 3rgb.com 2002~2022 Open Source Powered by web.py!