ajax 请求中的 Ajax 请求失败 - 再次重新加载整个页面

Question

所以，基本上我想要实现的目标： 在 index.php 中 我会输入产品代码来搜索产品信息和图像（该查询在 open_first.php 中运行，通过 ajax 发布请求调用）。 它工作得非常完美..

加载 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>

文件 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() -function“手动检索”，否则它不会获取字段值.. 愚蠢的我..

我不知道这有多大影响，但我也改变了：

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

到

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

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

Answer 1

当您将事件处理程序应用于按钮或链接以执行 ajax 时...始终阻止浏览器默认处理对该元素的单击

有两种方法。使用preventDefault() 或从处理程序返回false

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

  /* method 2*/
  return false;

})

将提交处理程序添加到表单以使用表单数据执行 ajax 而不是将表单重定向到其操作 url 也是如此

Answer 2

您的代码 $('input:checkbox[name="selectedImages[]"]:checked'); 正在返回 undefined 导致 ajax 调用中的 json 数据无效。检查那里的选择器。