使用jQuery .load（）將數組從輸入加載到PHP？

Question

好吧，我一直在尋找和尋找大約2周的時間，我還沒有找到我需要弄清楚的東西，所以現在是時候向專家提問！

我正在製作廣告管理系統，請求表單的其中一個部分是選擇廣告的開始日期和結束日期。用戶可以選擇添加更多日期。

所以，有兩個輸入，在那裏initally ...

<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 noob有所瞭解，我會大大地apprecaite它！ ：D

Answer 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 
    } 
?> 

Answer 2

您的邏輯存在一個主要缺陷：任何id屬性在文檔中必須是唯一的。當你多次使用多個ID時，它不會起作用，或者至多會給出意想不到的結果。第一

Answer 3

第一件事，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的巫術，只要你想（按一下按鈕，提交等）：

$('#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。

Answer 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}); 

Answer 5

我碰上INT THI最近我發現了一個問題，我發現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 
    } 
?>