2015-09-12 22 views
2

我從數據庫生成值的列表,像這樣:充分利用列表項的值,並將其命名爲jQuery的AJAX調用

<div class="pure-u-1 pure-u-md-2-5 pure-u-lg-2-5 content-left"> 
    <div id="scroll" class="card"> 
    <a href="javascript:showhide('green')"><h2 class="is-center">green</h2></a> 
    <ul id="greens" class="card-content-ingredients" style="list-style-type: none;"> 
     <?php 
     foreach ($greens as $green) { 
     echo "<li>"; 
     echo "<input type='hidden' class='item_id' value='" . $green['id'] . "' name='" . $green['name'] . "'>"; 
     echo "<span class='item-name-small'>" . $green['name'] . "</span>"; 
     echo "<span class='item-description-menu'>" . $green['description'] . "</span>"; 
     echo "<span class='content-right'>"; 
     echo "</span>"; 
     echo "</li>"; 
     }?> 
    </ul> 
    </div> 
</div> 

而且我試圖抓住被點擊的項目一個jQuery功能轉到另一頁:

<script> 
    $(document).ready(function(){ 
     $('ul.card-content-ingredients li').click(function(){ 
     var form_data = $(this).serialize(); 
     $.ajax({ 
      url: "add-to-cart.php", 
      type: "POST", 
      dataType: "json", 
      data: form_data, 
      success: function() {} 
     }); 
     }); 
    }); 
    </script> 

而我很難發送實際的數組。我嘗試通過$(this).attr('id")獲取元素信息,但這並不奏效,我試圖序列化,現在只是抓住吸管。我錯過了什麼?

〔實施例:var_dump($greens)

array (size=31) 
    0 => 
    array (size=10) 
     'id' => string '19' (length=2) 
     'name' => string 'Almond Slices' (length=13) 
     'description' => string 'TOASTED' (length=7) 
     'price' => string '0.65' (length=4) 
     'nutritionix_id' => string '529e7dd1f9655f6d35001ce1' (length=24) 
     'nutritionix_cal' => string '110' (length=3) 
     'active' => string '1' (length=1) 
     'ingredienttype_id' => string '2' (length=1) 
     'subtype' => string '' (length=0) 
     'in_stock' => string '1' (length=1) 
    1 => 
    array (size=10) 
     'id' => string '57' (length=2) 
     'name' => string 'Apples' (length=6) 
     'description' => string 'Red Jacket' (length=10) 
     'price' => string '0.65' (length=4) 
     'nutritionix_id' => string '529e7dd1f9655f6d35001d21' (length=24) 
     'nutritionix_cal' => string '20' (length=2) 
     'active' => string '1' (length=1) 
     'ingredienttype_id' => string '2' (length=1) 
     'subtype' => string 'fruit' (length=5) 
     'in_stock' => string '1' (length=1) 
    2 => 
    array (size=10) 
     'id' => string '58' (length=2) 
     'name' => string 'Asparagus' (length=9) 
     'description' => string 'STEAMED' (length=7) 
     'price' => string '0.65' (length=4) 
     'nutritionix_id' => string '529e7dd1f9655f6d35001d1e' (length=24) 
     'nutritionix_cal' => string '0' (length=1) 
     'active' => string '1' (length=1) 
     'ingredienttype_id' => string '2' (length=1) 
     'subtype' => string 'veggies' (length=7) 
     'in_stock' => string '1' (length=1) 
    3 => 
    array (size=10) 
     'id' => string '42' (length=2) 
     'name' => string 'Banana Peppers' (length=14) 
     'description' => string '' (length=0) 
     'price' => string '0.65' (length=4) 
     'nutritionix_id' => string '529e7dd1ea63d49335001ce4' (length=24) 
     'nutritionix_cal' => string '10' (length=2) 
     'active' => string '1' (length=1) 
     'ingredienttype_id' => string '2' (length=1) 
     'subtype' => string 'veggies' (length=7) 
     'in_stock' => string '1' (length=1) 
    4 => 
    array (size=10) 
     'id' => string '43' (length=2) 
     'name' => string 'Beets' (length=5) 
     'description' => string 'Fresh' (length=5) 
     'price' => string '0.65' (length=4) 
     'nutritionix_id' => string '529e7dd1ea63d49335001cde' (length=24) 
     'nutritionix_cal' => string '30' (length=2) 
     'active' => string '1' (length=1) 
     'ingredienttype_id' => string '2' (length=1) 
     'subtype' => string 'veggies' (length=7) 
     'in_stock' => string '1' (length=1) 
    5 => 
    array (size=10) 
     'id' => string '59' (length=2) 
     'name' => string 'Black Beans' (length=11) 
     'description' => string 'Organic' (length=7) 
     'price' => string '0.65' (length=4) 
     'nutritionix_id' => string '529e7dd1ea63d49335001d3f' (length=24) 
     'nutritionix_cal' => string '35' (length=2) 
     'active' => string '1' (length=1) 
     'ingredienttype_id' => string '2' (length=1) 
     'subtype' => string 'veggies' (length=7) 
     'in_stock' => string '1' (length=1) 
+0

那是因爲你不是正確創建輸入數組 – CodeGodie

回答

2

我看到的問題是,你的JS代碼編寫假設你提交一個表單,但在現實中,你是不是。

讓我給你上形成的簡單說明。通常情況下,提交表單時會查看name屬性的輸入元素。因此,舉例來說,如果你有這樣的形式:

<form method="POST" action="some_link.php"> 
    <input type="hidden" name="myinput1" value="myvalue1"/> 
    <input type="hidden" name="myinput2" value="myvalue2"/> 
    <input type="submit"/> 
</form> 

當「提交」按鈕被點擊,重點將是其母公司form,它會看方法(在這種情況下,POST),並收集表單中的所有輸入名稱創建一個數組。如果輸入名稱不存在,它將忽略它,如果名稱相同,它將重寫最後一個名稱。在提供的例子中,表單提交時,下面的POST陣列將被髮送到PHP像這樣:

array (size=2) 
    'myinput1' => string 'myvalue1' (length=1) 
    'myinput2' => string 'myvalue2' (length=1) 

這會是不錯的,如果你有你的HTML表單,但你不知道。所以JS代碼$(this).serialize()將不起作用,因爲serialize()假定您提交了表單。我就弄死形式結構和重寫你的HTML,這樣我們就可以手動通過AJAX發送的信息是這樣的:

<ul id="greens" class="card-content-ingredients"> 
    <?php foreach ($greens as $green) { ?> 
     <li> 
      <span class='item_id' style='display:none'><?= $green['id'] ?></span> 
      <span class='item-name-small'><?= $green['name'] ?></span> 
      <span class='item-description-menu'><?= $green['description'] ?></span> 
      <span class='content-right'></span> 
     </li> 
    <?php } ?> 
</ul> 

到目前爲止,我們遍歷的項目,以創造一個li持有該項目的信息,特別是該項目的ID,名稱和說明。每個項目元素都有一個類別:item_id,item-name-small,item-description-menu。現在您需要問自己,當我將這些信息發送到add-to-cart.php時,我應該只是發送了ID還是發送了我已經從數據庫請求的所有信息?我只是發送你已經有的東西,這樣你就不會再創建另一個數據庫查詢。因此,代碼需要收集點擊li時的所有信息。爲了收集項目信息,並將其發送通過AJAX到PHP,我將創建下列JS:

<script> 
    $(document).ready(function() { 

     $('ul.card-content-ingredients li').click(function() { 
      var postdata = { 
       id: $(this).find('.item_id').text(), 
       name: $(this).find('.item-name-small').text(), 
       description: $(this).find('.item-description-menu').text() 
      }; 
      $.ajax({ 
       url: "add-to-cart.php", 
       type: "POST", 
       dataType: "json", 
       data: postdata, 
       success: function (data) { 
        console.log(data); 
       } 
      }); 
     }); 
    }); 
</script> 

PHP現在應該能夠收到像這樣的POST請求:

<?php 
$id = $_POST['id']; 
$name = $_POST['name']; 
$description = $_POST['description']; 

希望與所有這就是說,你現在可以提交你的AJAX請求。讓我知道這一切是否適合你,如果沒有,我可以繼續更深入地解釋。

+0

感謝您的快速反應,我想,我仍然沒有看到POST中的任何內容:空數組。 – Bardworx

+0

你可以'var_dump($ greens);'告訴我你得到了什麼? – CodeGodie

+0

我剛剛編輯我的文章與var_dump陣列果嶺。 – Bardworx

1

看起來像一個解決方案可能已經實現,並發現在聊天中,但對於任何未來的在線觀看者,只是爲了拋出我的2美分,我會發布我認爲你想要得到的東西在。

很確定我看到了整個問題。看起來您想要爲選定的每個項目發送一組信息。我建議不要這樣做,因爲你已經可以檢索到信息服務器端。最好是發送該項目的ID,以便檢索其信息服務器端。但是,如果您仍想檢索完整數組,我也會向您顯示。

對於基本ID檢索:

首先我建議你的PHP的一點點改寫/ HTML

<div class="pure-u-1 pure-u-md-2-5 pure-u-lg-2-5 content-left"> 
    <div id="scroll" class="card"> 
    <a href="javascript:showhide('green')"><h2 class="is-center">green</h2></a> 
     <ul id="greens" class="card-content-ingredients" style="list-style-type: none;"> 
      <!-- Change the inline PHP to be a little more friendly in use, and remove all that echoing --> 
      <?php foreach ($greens as $grn): ?> <!-- the : is like {, but for inline --> 
       <li> 
        <input type="hidden" class="item_id" value="<?php echo $grn['id']; ?>" name="greens" /> <!-- Here I make a generic name you can search by for IDs that you'll use to get that info again --> 
        <span class="item-name-small"><?php echo $grn['name']; ?></span> 
        <span class="item-description-menu"><?php echo $grn['description']; ?></span> 
        <span class="content-right"></span> 
       </li> 
      <?php endforeach; ?> 
     </ul> 
    </div> 
</div> 

了那個小的變化,它不僅使它更容易編寫HTML,它還準確地指出了你要尋找的服務器端。也就是說,我只會對你的jQuery做一點改動。

變化

$('ul.card-content-ingredients li').click(function(){ 
    var form_data = $(this).serialize(); 

$('ul.card-content-ingredients li').click(function(){ 
    var form_data = $(this).find('index').serialize(); 

這將使服務器端檢索非常容易!在您的服務器端,您應該然後只需有類似:

$greensID = $_POST['greens']; 
$greensInfo = retrieve_greens_info_from_id($greensID); 
// then just make a function, whereby you simply 
// pass in the id, make your pull the array 
// shown in your question, and simply grab the one 
// with the matching ID! 

如果你想要的信息的數組,然後它得到一個可愛的小更冒險

有不同的方法可以做到這一點。有人會說,你可以添加每個項目作爲內聯,HTML5 數據屬性。然而,在調試客戶端時,這可能會在處理撇號和代碼醜陋方面變得毛骨悚然,並且一件接一件。就個人而言,如果這是標準,我不能只使用ID,那麼我會用一點JS/jQuery魔法來幫助。

像這樣:

主要HTML

<div class="pure-u-1 pure-u-md-2-5 pure-u-lg-2-5 content-left"> 
    <div id="scroll" class="card"> 
    <a href="javascript:showhide('green')"><h2 class="is-center">green</h2></a> 
     <ul id="greens" class="card-content-ingredients" style="list-style-type: none;"> 
      <!-- Change the inline PHP to be a little more friendly in use, and remove all that echoing --> 
      <?php foreach ($greens as $grn): ?> <!-- the : is like {, but for inline --> 
       <li> 
        <input type="hidden" class="item_id" value="<?php echo $grn['id']; ?>" name="greens" /> <!-- Here I make a generic name you can search by for IDs that you'll use to get that info again --> 
        <span class="item-name-small"><?php echo $grn['name']; ?></span> 
        <span class="item-description-menu"><?php echo $grn['description']; ?></span> 
        <span class="content-right"></span> 
       </li> 
      <?php endforeach; ?> 
     </ul> 
    </div> 
</div> 
<!-- script after --> 
<script> 
    $(function() { 
     var greens = <?php echo json_encode($greens); ?>; // this gives you a js object of the greens arrays 
      // see reference below for what it'll look like 
     $('#greens li').each(function(i) { // i is index 
      $(this).data('nfo', greens[i]); // this get all the info for this item 
      // this is what you'll need to grab for your jQuery Ajax 
     }); 
    }) 
</script> 

然後,在你阿賈克斯呼叫

<script> 
    $(function() { 
     $('#greens li').click(function(){ 
      var nfo = $(this).data('nfo'), // here we retrieve all the info for this item 
       form_data = $.param(nfo); // this will make your data nice and tidy and easy to grab server-side! 
      $.ajax({ 
       url: "add-to-cart.php", 
       type: "POST", 
       dataType: "json", 
       data: form_data, 
       success: function() {} 
      }); 
     }); 
    }); 
</script> 

然後,在服務器端,只需得到fr OM POST,如:

$gID = $_POST['id']; 
$gName = $_POST['name']; 
$gDesc = $_POST['description']; 
// and so on, and so on 

果嶺JSON對象看起來像:

var greens = { 
    "id": "19", 
    "name": "Almond Slices", 
    "description": "TOASTED", 
    "price": "0.65", 
    "nutritionix_id": "529e7dd1f9655f6d35001ce1", 
    "nutritionix_cal": "110", 
    "active": "1", 
    "ingredienttype_id": "2", 
    "subtype": "", 
    "in_stock": "1" 
}, { 
    "id": "57", 
    "name": "Apples", 
    "description": "Red Jacket", 
    "price": "0.65", 
    "nutritionix_id": "529e7dd1f9655f6d35001d21", 
    "nutritionix_cal": "20", 
    "active": "1", 
    "ingredienttype_id": "2", 
    "subtype": "fruit", 
    "in_stock": "1" 
}, { 
    "id": "58",