具有相同名称和方括号的 jQuery 输入答案

【问题标题】：jQuery input with same name and square brackets具有相同名称和方括号的 jQuery 输入
【发布时间】：2012-11-27 10:01:44
【问题描述】：

我有一个使用 jQuery 和 Ajax 发布表单数据的表单，但无法让它发送具有相同名称和方括号的输入值。

输入看起来像这样，并且会有不同的值：

<input type="text" name="service[]" value="Value 1">

这是获取值的 var：

var service = $("input[name=service\\[\\]]")

那么用于收集通过 Ajax 发送的数据的 var 如下所示：

var data = 'name=' + name.val() + '&email=' + email.val() + '&phone=' + phone.val() + '&service=' + service.val() + '&brief='  + encodeURIComponent(brief.val());

那么在发送邮件的PHP脚本中包含以下...

$service = $_POST['service'];
$body .= implode(' | ', $service);

所以我的问题是，如何获取名称为 name=service[] 的输入值并通过 Ajax 发送。

提前致谢:)

【问题讨论】：

嗨 Stuart，如果其中一个问题解决了您的问题，请点击接受。

标签： jquery ajax

【解决方案1】：

不是您问题的确切答案，但有一种更简单的方法。

将您的输入字段包装在一个表单中并创建一个on-submit-事件。将此事件返回 false，因此它实际上并未提交。

这就是诀窍。在返回事件 false 之前，请执行 ajax-request。给表单一个 id 并使用 seralize-method 来制作一个 json-string。

[...]
data: $('#formIDGoesHere').serialize(),
[...]

如果您将此作为 POST 变量发布到您的 PHP 文件中，则您的所有值都不可用，就像它们通常在 $_POST 中一样。

【讨论】：

【解决方案2】：

你为什么要这样做？

var data = 'name=' + name.val() + '&email=' + email.val() + '&phone=' 
           + phone.val() + '&service=' + service.val() + '&brief=' 
           + encodeURIComponent(brief.val());

您不得从未转义的值构建字符串。这适用于 HTML，适用于 URL 编码的表单数据、SQL 和 JSON 以及几乎所有其他以字符串形式传输结构化数据的方式。

显然您使用的是encodeURIComponent()，但为什么只使用一次？

.serialize() 负责处理所有细节。使用它而不是构建您自己的 URL 字符串。

alert($('form').serialize());

【讨论】：

哇，这很简单！我对 jQuery/Ajax 很陌生，我从在线脚本中获取代码，我不知道 .serialize() 感谢您的帮助
如果你还是一个初学者，现在是内化这个终极真理的好时机：每当你通过连接字符串构建具有结构的东西（如 HTML 或 SQL，如上所述）时，瞬间胃痛应该提醒您您可能做错了什么。 所有跨站点脚本和注入漏洞以及许多错误都是粗心的字符串构建的结果。搜索您正在使用的框架以寻找避免字符串构建的方法。这些问题大部分都已经解决了，不要自己动手解决。

【解决方案3】：

您可能想阅读 this 并尝试以下操作：

$('#theFormID').serialize().replace('%5B%5D', '[]')

或者这个

$.param(obj, true);
$.post(url,serializedObj,function(){});

$.param 中的true 表示应使用序列化对象的传统方法。传统方法遇到同名参数时不使用方括号。

【讨论】：

【解决方案4】：

你的意思是这样的：

var values = $("input[name='service\\[\\]']")
              .map(function(){return $(this).val();}).get();

var joined = values.join("|"); //so it shows val1|val2| val3 .. and pass to server

【讨论】：

【解决方案5】：

如果您有多个名称为 service[] 的输入，您可以像下面这样检索输入

var service = $("input[name=service\\[\\]]");

但是如果您现在有多个输入，则服务变量现在是一个数组，您必须遍历服务数组中的每个项目并检索类似的值

for(var i=0;i<service.length;i++){
  data += service[i].val()+",";
}

【讨论】：