php - AJAX 不会加载 URL

Question

有人可以看看这个并告诉我为什么这里的代码不会加载我试图调用的 php 页面吗？

<script src="_js/jquery-1.7.2.min.js"></script>     <!-- Linking jQuery -->
<script>                        
$(document).ready(function() {
$('.answer').click(function(e) {
var color = $(this).attr("data-color");
$.ajax({
type: "POST",
url: "test.php",
data: '{ color: "'+color+'" }',
success: function(data){ alert(data); }
error: function (jqXHR) {
...
}
})
})
})
</script>

应该触发这个的链接是....

<div id="red" data-color="red" class="answer">
<a href="#"><img src="images/red.jpg" width="100%" /></a>
</div>



<div id="blue" data-color="blue" class="answer">
<a href="#"><img src="images/blue.jpg" width="100%" /></a>
</div>

Test.PHP 只是为了让我可以阅读 POST 中的内容

<?php
     print_r($_POST);
?>

Answer 1

我的猜测是您需要更改data: '{ color: "'+color+'" }',为data: { color: color},

并出于理智目的更改$(this).attr("data-color");为$(this).data("color");

也许是这样的：

(function($){
    $(document).ready(function() {
        $('.answer').click(function(e) {
            var color = $(this).data("color");
            $.ajax({
                type: "POST",
                url: "test.php",
                data: { color: color}
            }).done(function ( data ) {
                alert(data);               
            }).fail(function () {
                alert("FAILED!");               
            });
        });
    });
})(jQuery);

Answer 2

$.ajax({
    type: "POST",
    url: "test.php",
    data: { color: color },
    success: function(data){ alert(data); },
    error: function (jqXHR,text) {
        alert(text);
    }
});