如果输入元素是数组，如何使用 JQuery 发送序列化表单数据

Posted 2023-02-24

【中文标题】如果输入元素是数组，如何使用 JQuery 发送序列化表单数据

【英文标题】：How to send serialize form data using JQuery if the input element is an array

【发布时间】：2010-09-23 04:50:50

【问题描述】：

我的 php 代码中有这段代码：

while ($row = mysqli_fetch_assoc($result))

    extract($row);
    echo "<tr>";
    echo "<td bgcolor='#FFFFFF'><input id='bookArray[]' name='bookArray[]' type='checkbox' value='$book_id' />$book_id</td>";
    echo "<td bgcolor='#FFFFFF'>$threat_name</td>";
    echo "</tr>";

在 html 页面中，我想使用 jQuery serialize() 方法在 bookArray[] 中发送所选书籍的数组。在我的 javascript 中，

var selectedbooks = $("book_form").serialize();
alert (selectedbooks); 

在警告消息框中，我没有得到任何值（空字符串）。

以前我使用 Prototype 时，效果很好。

【参考方案1】：

简单：serialize().replace(/%5B%5D/g, '[]')

【讨论】：

好主意，除了应该是 serialize().replace(/%5B%5D/g, '[]');

（因为如果不是带全局属性的正则表达式，只会替换第一个匹配项。）

不想浪费你的时间，你应该记住删除正则表达式周围的单引号:))

【参考方案2】：

我想出了一个方法，当使用 post 发送数据时

另一方面，您可以使用 $_['post']['name'] 访问您的元素

如果它是一个数组（例如多选），那么在您的服务器上，您可以再次将其作为数组访问$_POST['myselect'][0]...

代码： Function to serialize form data for post

function serializePost(form) 
    var data = ;
    form = $(form).serializeArray();
    for (var i = form.length; i--;) 
        var name = form[i].name;
        var value = form[i].value;
        var index = name.indexOf('[]');
        if (index > -1) 
            name = name.substring(0, index);
            if (!(name in data)) 
                data[name] = [];
            
            data[name].push(value);
        
        else
            data[name] = value;
    
    return data;

【参考方案3】：

var arTags = new Array();

jQuery.map( $("input[name='tags[]']") , function(obj,index)

   arTags .push($(obj).val());
);

var obj = 'new_tags'           : $("#interest").val() ,
           'allready_tags[]'  : arTags ;

var post_data = jQuery.param(obj,true);

$.ajax(
      type :  'POST',
      url  :  'some_url',
      data :  post_data,
      dataType : "html",
      success: function(htmlResponse)
      

      
);

【参考方案4】：

jQuery 的原型/Scriptaculous 序列化功能：

<script>
function toObjectMap( queryString )

    return '\'' + queryString.replace(/=/g, '\':\'').replace(/&/g, '\',\'') + '\'';

</script>
...
<div id="result"></div>
...
<form onSubmit="$('#result').load( ajaxURL, toObjectMap( $('#formId').serialize() ) );" ...>
...

【讨论】：

这一切都很好，但问题是您通过 $.serialize 将表单元素传递给您的函数，这将重新排列我们不想替换的东西，即使我没有看过在源代码中，我认为序列化无论如何都会做这一切，但它会做一些我们不希望它做的额外事情，比如替换'['和']'

【参考方案5】：

@托马拉克 您可以在 XHTML 中使用方括号字符“[”和“]” 看 http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-transitional.dtd_input

所以这意味着一个名称可以合法地在 XHTML 中包含许多不同的字符，尽管使用斜杠或括号没有多大意义。 PHP 支持在表单名称中使用数组表示法，因此如果在某些情况下不使用数组表示法，您可能会错过一个技巧。

【参考方案6】：

jQuery 1.4

var myform = $("book_form").serialize();

decodeURIComponent(myform);

【参考方案7】：

正常工作 jQuery =>

var data = $('form').serialize();
            $.post(baseUrl+'/ajax.php',
                    action:'saveData',data:data,
                    function( data ) 
                        alert(data);
                    );

php =>

parse_str($_POST['data'], $searcharray);
    echo ('<PRE>');print_r($searcharray);echo ('</PRE>');

输出 =>

[query] => 
[search_type] => 0
[motive_note] => 
[id_state] => 1
[sel_status] => Array
    (
        [8] => 0
        [7] => 1
    )

你可以对数组数据做任何你想做的事情， 感谢Aridane https://***.com/questions/1792603

【参考方案8】：

您可能需要按照@Tomalak 的建议更改您的 PHP，但您还需要更改您的 javascript。要引用命名元素，请使用 #name 选择器：

var selectedbooks = $('form#book_form').serialize();;

【讨论】：

我认为 serialize() 在从表单应用于包装集时，会返回正确编码的字符串。

是的。刚刚测试过了。固定。

我不确定选择器是否最佳。它不应该只是“表格”或“#bookform”吗？我认为只使用“#id”会更快，但在其他方面相当于“element#id”。

哦，您的代码末尾有一个多余的分号。修复后删除该评论即可。

【参考方案9】：

问题解决了！这就是我所做的。

在 PHP 文件中创建动态复选框行，

  while ($row = mysqli_fetch_assoc($result))
  
   extract($row);
   echo "<tr>";
   echo "<td bgcolor='#FFFFFF'><input name='books' type='checkbox' value='$book_id' />$book_id</td>";
   echo "<td bgcolor='#FFFFFF'>$book_name</td>";
   echo "</tr>";
   // while

我不再使用 JQuery $.post 方法了。我将代码更改为以下

    var my_query_str = '';

$("input[@type='checkbox'][@name='books']").each(
  function()
  
    if(this.checked)
    
           my_query_str += "&bookArray[]=" + this.value;
    
  );


$.ajax(

    type: "POST",
    url: "saveBookList.php",
    data: "dummy_data=a" + my_query_str,
    success:
        function(responseData)
        
            $("#save-result").empty().append(responseData);
        ,
    error:
        function()
        
            $("#save-result").append("An error occured during processing");
        
);

现在，在 saveBookList.php 页面中，$_POST['bookArray'] 的值是一个数组。耶！耶！

我确实希望并且希望 JQuery 的 $.post 方法能够像 Prototype 一样支持数组数据类型。 :)

【讨论】：

这不是 jQuery Post 的问题，它是序列化你可以这样做： var my_query_str = ''; $("input[@type='checkbox'][@name='books']").each( function() if(this.checked) my_query_str += "&bookArray[]=" + this.value; ); jQuery.post("saveBookList.php","dummy_data=a" + my_query_str ,function(responseData) $("#save-result").empty().append(responseData); , 错误：function() $("#save-result").append("处理过程中发生错误"); );

【参考方案10】：

var data = $(form).serialize();
$.post('post.php', '&'+data);

【讨论】：

+1：如果这只是使用 .post() 等提交，虽然文档显示它使用 JSON 化数据，但它也将接受序列化数据：参见 @987654321 @

【参考方案11】：

这不是 jQuery Post 的问题，它是序列化你可以这样做：

    var my_query_str = ''; 
    $("input[@type='checkbox'][@name='books']").each( function()  
       if(this.checked)  my_query_str += "&bookArray[]=" + this.value;  
    ); 
   jQuery.post(
      "saveBookList.php",
      "dummy_data=a" + my_query_str ,
       function(responseData)   
          $("#save-result").empty().append(responseData); 
       , 
       error: function()  
            $("#save-result").append("An error occured during processing"); 
       
   ); 

但是你真正需要做的就是在序列化它们之后将'[' & ']' 替换回它们自己。因为序列化（）；将它们更改为它们的 htmlencoded 值！

【讨论】：

我不知道 [ 和 ] 的等价物，否则我会为你做，只需找出并使用 jQuery 的 .replace() 函数。

【参考方案12】：

如果您必须只发布该数组而不发布其他输入字段，这是一个干净且快速的解决方案：

var selectedbooks = $('book_form input[name^="bookArray["]').serialize();
alert (selectedbooks); 

说明：

选择器^=选择name属性值以'bookArray'开头的所有元素，左方括号'['确保元素是我们要序列化的数组，而不仅仅是以字符串'bookArray'开头的变量'。

【参考方案13】：

你必须用这个替换左方括号和右方括号：

data: $(this).serialize().replace(/%5B/g, '[').replace(/%5D/g, ']'),

【参考方案14】：

感谢托马拉克。

在 PHP 文件中，我现在使用以下代码：

while ($row = mysqli_fetch_assoc($result)) 
    extract($row);
    echo "<tr>";
        echo "<td bgcolor='#FFFFFF'><input id='$book_id' name='bookArray[]' type='checkbox' value='$book_id' />$book_id</td>";
        echo "<td bgcolor='#FFFFFF'>$book_name</td>";
    echo "</tr>";
 // while

**book_id 是唯一的。

使用 tvanfosson 解决方案，现在我可以获得输入值数组

var selectedBooks = $('form#book_form').serialize(); 警报（选定的书籍）；

从警报消息框中，我得到 ==> bookArray%5B%5D=T2.05&bookArray%5B%5D=T2.81

现在，当我使用 JQuery 将序列化输入值发送到 PHP 文件时

var selectedBooks   = $('form#book_form').serialize();
alert (selectedBooks);

var url = 'saveBookList.php';

// Send to server using JQuery
$.post(url, bookArray: selectedBooks, function(responseData) 
    $("#save-result").text(responseData);
);

在 saveBookList.php 中处理序列化表单，我收到了这个错误 “为 foreach() 提供的参数无效”。

在 saveBookList.php 中，

// If you have selected from list box.
if(isset($_POST['bookArray'])) 

    // Get array or bookID selected by user
    $selectedBookId = $_POST['bookArray'];
    echo $selectedBookId;

    foreach($selectedBookId as $selectListItem) 
        echo "You sent this -->" . $selectListItem . "\n";
    

如果我使用 Prototype 发送，上面的 PHP 代码可以正常工作。

当我做原型时 echo $selectedBookId;

我得到了数组。

对于 JQuery，当我这样做时 echo $selectedBookId;

我得到了 ==> bookArray%5B%5D=T4.11&bookArray%5B%5D=T4.38

我的问题，jQuery 是否支持 post 方法的数组值？

【讨论】：

您错过了重点：您没有向服务器发送数组。 HTTP Posts 不能这样工作。您发送一个逗号分隔的值列表：$selectedBookId 类似于“1,2,3,4,5”。要再次创建数组，请使用： $selectedBooks = explode("," $selectedBookId);

顺便说一句：您的 PHP 中仍然有“name='bookArray[]'”，这只是 HTML 中的错误。将其更改为简单的“name='books'”。正如我所说，HTML 中没有表单值数组这样的东西。

您真的应该在 PHP 中更频繁地使用 var_dump()。您会立即发现您并没有首先处理数组。

@Tomalak: PHP 需要varname[] 来处理作为数组服务器端的复选框组（或任何输入）。