ajax請求中的Ajax請求失敗 - 重新加載整個頁面

Question

所以，基本上我試圖實現： 在index.php 我會輸入產品代碼來搜索產品信息和它的圖像（該查詢運行在open_first.php中，通過ajax post請求調用）。 它的工作原理只是完美..

當open_first.php被加載時，它會顯示我一些圖片，我可以從中選擇（當我點擊圖片，它的相應的複選框得到的託運包含圖像ID）。 這也適用，很好。

但是， 如果我在字段中輸入代碼：「productCodeCopy」並點擊「confirmCodeCopy」 - 按鈕重新加載整個頁面，我的意思是index.php，我輸入的所有內容都會丟失，而我再次回到起點。我不明白爲什麼它這樣做。我想這與事實有關，第二個Ajax請求是由動態創建的頁面（open_first.php）創建的？我是否錯過了我應該發佈的內容？或者是什麼問題，這讓我非常沮喪，因爲我已經嘗試了幾個小時來解決這個問題。

說明： Jquery被加載到index.php，open_first.php和open_second.php中，我剛剛忽略了這一點，以使代碼更簡單。

文件：index.php文件（以下簡稱 「起點」）

<!-- head --> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#confirmCode").on('click', function(){ 
    var productCode = $("#productCode").val(); 
    $.ajax({ 
     url: 'open_first.php', 
     type: "POST", 
     data: ({code: productCode}), 
     success: function(data){ 
      $("#found").html(data); 
     }, 
     error: _alertError 
    }); 
    function _alertError() { 
     alert('error on request'); 
    } 
    }); 
}); 
</script> 

<!-- body --> 
<input type="text" class="textfields" id="productCode" name="productCode" value="YT-6212"> 
<input type="button" class="admin-buttons green" name="confirmCode" id="confirmCode" value="Search"> 
<div id="found"></div> 

FILE open_first.php

<script type="text/javascript"> 
    $(function() { 
     $("#foundImage").on('click', function(){ 
      $('#foundImage').toggleClass("foundImage-selected foundImage"); 
      var myID = $('#foundImage').data('image-id'); 
      var checkBox = $('input[id=selectedImages-'+myID+']'); 
      checkBox.prop("checked", !checkBox.prop("checked")); 
     }); 

     $("#confirmCodeCopy").on('click', function(){ 
      var checkedItems = $('input:checkbox[name="selectedImages[]"]:checked');     
      // this code here reloads the whole page/view (as in "index.php") 
      $.ajax({ 
       url: 'open_second.php', 
       type: "POST", 
       data: ({checked: checkedItems, copyTo: productCodeCopy, code: "<?php echo $_POST['code']; ?>"}), 
       success: function(data){ 
        $("#copyToProducts").append(data); 
       }, 
       error: _alertError 
      }); 
      /* 
      // the code below runs just fine when I hit the button "confirmCodeCopy" 
      alert('Fuu'); 
      return false; 
      */ 
     }); 

     function _alertError() { 
      alert('error'); 
     } 
    }); 
</script> 
<!--BODY--> 
<!-- these are dynamically generated from php, just to simplify we have checkbox that contains value "1" to be posted in ajax --> 
<div class="foundImage" id="foundImage" data-image-id="1"><img src="image.jpg"><input type="checkbox" id="selectedImages-1" name="selectedImages[]" value="1" style="display: none;"></div> 
<label for="productCodeCopy">Products code</label> 
<input type="text" class="textfields" id="productCodeCopy" name="productCodeCopy"> 
<br /><br /> 
<label for="confirmCodeCopy">&nbsp;</label> 
<input type="button" class="admin-buttons green" name="confirmCodeCopy" id="confirmCodeCopy" value="Search"> 
<div id="copyToProducts"></div> 

open_second.php只打印出目前POST變量，所以沒有什麼特別的呢。

求解

好吧，我解決了它。有了達姆達姆的幫助。

我刪除的行：

$('input:checkbox[name="selectedImages[]"]:checked'); 

而將此添加：

var checkedItems = new Array(); 
var productToCopy = $('#productCodeCopy').val(); 
$("input:checkbox[name=selectedImages[]]:checked").each(function() { 
    checkedItems.push($(this).val()); 
}); 

由於沒有表單元素存在，它沒有除非「手動檢索」通過獲取字段值。 VAL（）函數..愚蠢的我..

我不知道有多少受此影響，但我也改變了：

data: ({checked: checkedItems, copyTo: productCodeCopy"}) 

要

data: {"checked": checkedItems, "copyTo": productToCopy} 

所以現在工作得很好:)酷！

Answer 1

當您將事件處理程序的按鈕或鏈接做阿賈克斯......總是防止點擊的瀏覽器的默認處理該元素

上有2種方式。無論是使用preventDefault()或從處理程序返回false

$("#confirmCodeCopy").on('click', function(event){ 
    /* method one*/ 
    event.preventDefault(); 
    /* handler code here*/ 

    /* method 2*/ 
    return false; 

}) 

同樣是添加提交處理程序的形式做表單數據阿賈克斯，而不是形式重定向到它真正的行動網址

Answer 2

代碼$('input:checkbox[name="selectedImages[]"]:checked');返回undefined使ajax調用中的json數據無效。檢查你的選擇。