使用jQuery .load()将数组从输入加载到PHP?
Posted
技术标签:
【中文标题】使用jQuery .load()将数组从输入加载到PHP?【英文标题】:Load array from inputs to PHP with jQuery .load()? 【发布时间】:2012-01-15 06:37:58 【问题描述】:好的,我一直在寻找和寻找大约 2 周,但我还没有找到我需要弄清楚的确切内容,所以现在是时候询问专家了!
我正在开发一个广告管理系统,申请表的其中一个部分是选择广告的开始和结束日期。用户可以选择添加更多日期。
所以,最初有两个输入...
<input type="text" name="startDate[]" id="startDateInput">
<input type="text" name="enddate[]" id="endDateInput">
然后,在此选项下是动态添加更多输入的选项。 当用户添加更多输入时,它只会复制那些初始输入,因此我们最终会得到更多实例。例如:
<input type="text" name="startDate[]" id="startDateInput">
<input type="text" name="enddate[]" id="endDateInput">
<input type="text" name="startDate[]" id="startDateInput">
<input type="text" name="enddate[]" id="endDateInput">
有没有办法使用 .load() 将这些输入的结果作为数组发送? 我让它使用下面的代码发送和显示一组输入的信息...
var startDate = $("#startDateInput").val();
var endDate = $("#endDateInput").val();
$("#adBooking").show().load('../scripts/checkSpots.php', startDate: startDate, endDate: endDate);
我想我只是没有 100% 了解如何做到这一点。过去两周我一直在绞尽脑汁,但找不到与我正在做的事情完全相关的任何事情。
但是,我需要做的是从所有 startDate 和 endDate 输入中创建一个数据数组,然后将其通过 .load() 并进入 checkSpots.php 页面并让它显示每个集合的信息开始/结束日期。
有没有其他方法可以做到这一点?也许是更有效的方法?或者,如果有人能对这个破碎的 jQuery 菜鸟有所了解,我会非常感谢它! :D
【问题讨论】:
【参考方案1】:演示: http://jsbin.com/etihaw/3
$(function()
$("#add-date").click(function(e)
var i = $('.end-date').length + 1;
$('<p class="dates">' +
'<input class="start-date" name="startDate[' + i + ']" id="startDate' + i + '" />' +
'<input class="end-date" name="endDate[' + i + ']" id="endDate' + i + '" />' +
'</p>').insertAfter('.dates:last');
e.preventDefault();
);
$('#my-form').submit(function()
var post_data = $(this).serialize();
//$("#adBooking").show().load('../scripts/checkSpots.php', post_data);
alert(post_data);
return false;
);
PHP
<?php
foreach($_POST['startDate'] as $key => $val )
echo $key; // 1
echo $val; // 07/12/2011
foreach($_POST['endDate'] as $key => $val )
echo $key; // 1
echo $val; // 09/12/2011
?>
【讨论】:
我认为这个答案比我的要好——绝对更彻底,我喜欢表单上的 .serialize() 。从来没有想过这样做! 这正是我所需要的。谢谢!你们是理智的保护者!非常感谢 @Adam West:嗨,伙计,如果这个答案帮助或解决了你的问题,你能打勾吗?谢谢【参考方案2】:首先,ID 必须是唯一的,所以当添加新的日期对时,在 id 的末尾附加一个限定符:
<input type="text" name="startDate[]" id="startDateInput1">
<input type="text" name="enddate[]" id="endDateInput1">
<input type="text" name="startDate[]" id="startDateInput2">
<input type="text" name="enddate[]" id="endDateInput2">
或者更好的是,使用一个类:
<input type="text" name="startDate[]" class="startDateInput">
<input type="text" name="enddate[]" class="endDateInput">
<input type="text" name="startDate[]" class="startDateInput">
<input type="text" name="enddate[]" class="endDateInput">
然后,您可以随时应用一些 jQuery voodoo(按钮单击、提交等):
$('#myButton').click(function()
// Our ajax post data. For example, $_POST['startDates'][2] would
// give you the 3rd start date in your php file.
var data =
startDates: new Array(),
endDates: new Array()
;
// Loop through each date pair, extract its value, and add it to our post data
$('.startDateInput').each(function()
data.startDates.push(this.val());
);
$('.endDateInput').each(function()
data.endDates.push(this.val());
);
// Load it!
$('#result').load('doSomething.php', data);
);
注意:以上代码未经测试,只是一种可能解决方案的示例。
希望对您有所帮助。哦,还有obligatory Family Guy reference。
【讨论】:
哈哈,我总能得到《恶搞之家》/《蝙蝠侠》的参考资料。我喜欢市长的更好!谢谢您的帮助!我使用了混搭的答案,得出了我所需要的。非常感谢所有的帮助!非常感谢!【参考方案3】:您的逻辑存在一个重大缺陷:任何 id 属性在文档中都必须是唯一的。当您多次使用多个 id 时,它不会起作用或产生意想不到的结果。
【讨论】:
在尝试创建我的问题的非混乱版本时,我忘记包括我正在将计数添加到 ID 中,使它们成为“startDateInput1”、“startDateIpnut2”等等。感谢您的观察!【参考方案4】:首先,您不应该在单个 html 页面中的多个元素上使用相同的 id。这将导致各种不可预测的行为。改用类:
<input type="text" name="startDate[]" class="startDateInput">
<input type="text" name="enddate[]" class="endDateInput">
<input type="text" name="startDate[]" class="startDateInput">
<input type="text" name="enddate[]" class="endDateInput">
然后您需要使用 jquery 遍历每个元素来查询所有输入元素并将其值分配给适当的数组。
var myEndDateArray = [], myStartDateArray = [];
$(".endDateInput").each(function()
myEndDateArray.push($(this).val())
);
$(".startDateInput").each(function()
myStartDateArray.push($(this).val())
);
最后,您必须以兼容的发布格式将数组数据发布到您的页面。
$("#adBooking").show().load('../scripts/checkSpots.php', 'startdate[]': myStartDateArray, 'enddate[]': myEndDateArray);
【讨论】:
【参考方案5】:我最近遇到了这个问题,我发现 aSeptik 解决方案非常有用。
但其中有一个错误。来自jQuery documentation:
请求方法
如果数据作为对象提供,则使用 POST 方法;否则, 假定为 GET。
由于 .serialze() 函数的结果是字符串,因此 .load() 方法将使用 GET。
JS代码(相同):
$(function()
$("#add-date").click(function(e)
var i = $('.end-date').length + 1;
$('<p class="dates">' +
'<input class="start-date" name="startDate[' + i + ']" id="startDate' + i + '" />' +
'<input class="end-date" name="endDate[' + i + ']" id="endDate' + i + '" />' +
'</p>').insertAfter('.dates:last');
e.preventDefault();
);
$('#my-form').submit(function()
var post_data = $(this).serialize();
//$("#adBooking").show().load('../scripts/checkSpots.php', post_data);
alert(post_data);
return false;
);
带有 _GET 的 PHP 脚本:
<?php
foreach($_GET['startDate'] as $key => $val )
echo $key; // 1
echo $val; // 07/12/2011
foreach($_GET['endDate'] as $key => $val )
echo $key; // 1
echo $val; // 09/12/2011
?>
【讨论】:
以上是关于使用jQuery .load()将数组从输入加载到PHP?的主要内容,如果未能解决你的问题,请参考以下文章
通过 JQuery .load 将多个文件加载到一个 div 中?