AJAX不会加载URL [关闭]

Can someone take a look at this and tell me why the code here wont load the php page I am trying to call?

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

The link that should trigger this is....

<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 is just so I can read whats in the POST

<?php
     print_r($_POST);
?>

My guess would be that you need to change data: '{ color: "'+color+'" }', to data: { color: color},

and for sanity purposes change $(this).attr("data-color"); to $(this).data("color");

maybe something like this:

(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);

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