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数据无效。检查你的选择。