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

AJAX不会加载URL

2 个答案: