Ajax 值未传输到 PHP

发布于 2024-11-18 14:31:39 字数 2758 浏览 2 评论 0原文

我有这个星级评定系统。当您单击星星时,它应该将一个值传递给函数。然后使用 AJAX 将其发布到外部 PHP 文件。唯一的问题是,当它到达 PHP 文件时,它是 null 或没有值。

我将尝试使用 AJAX 在警报框中回显 $_POST['vote'] 变量,它是空白的,因此它不会返回为“NULL”或“0”,它只是什么都没有。我不确定我在哪里丢失了该值,因为我可以一直跟踪它到 send() 函数。有人看出问题了吗?

HTML:

<style type="text/css">
    #container{margin: 10px auto;width: 500px;height: 300px;background-color: gray;}
    #starContainer{padding-top:20px;margin:0 auto;width:150px;}
    .box{height:28px;width:30px;float:left;position:relative;z-index:5;cursor:pointer;}
    .star{background-image:url('emptyStar.png');background-repeat:no-repeat;}
    .starHover{background-image:url('goldStar.png');background-repeat:no-repeat;}
    #voteBar{float:left;height:28px;background-color:#dbd923;position:relative;top:-28px;z-index:1;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.box').hover(
        // Handles the mouseover
        function() {
            $(this).prevAll().andSelf().addClass('starHover');
        },
        // Handles the mouseout
        function() {
            $(this).prevAll().andSelf().removeClass('starHover'); 
        }
    );
});

    function Cast(vote)
    {
        if(window.XMLHttpRequest)
        {
            xmlhttp = new XMLHttpRequest();
        }
        else
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                alert(xmlhttp.responseText);
                var json = JSON.parse(xmlhttp.responseText);
            }
        }

        xmlhttp.open("POST", "process.php", true);
        xmlhttp.send('vote=' + vote);
    }
</script>

</head>
<body>

<div id="container">
    <center>
        <div id="starContainer">
            <div class="box star" onclick="Cast(1)"></div>
            <div class="box star" onclick="Cast(2)"></div>
            <div class="box star" onclick="Cast(3)"></div>
            <div class="box star" onclick="Cast(4)"></div>
            <div class="box star" onclick="Cast(5)"></div>
            <div id="voteBar"></div>
        </div>
    </center>
</div>

</body>
</html>

PHP:

<?php
$vote = $_POST['vote'];

$totalVoteValue = 0;
$amtVotes = 1;

$width = (($totalVoteValue + (($vote - $totalVoteValue) / $amtVotes)) / 5) * 150;

echo $width;
?>

I have this Star Rating system right. When you click on a star it should pass a value into the function. Then using AJAX it posts it to an external PHP file. The only problem is that when it gets to the PHP file it comes as null or no value.

I will try to echo the $_POST['vote'] variable in an alert box using AJAX and it is blank so it doesn't come back as "NULL" or "0" it's just nothing. I'm not sure where I'm losing the value because I can track it all the way to the send() function. Anyone see a problem?

HTML:

<style type="text/css">
    #container{margin: 10px auto;width: 500px;height: 300px;background-color: gray;}
    #starContainer{padding-top:20px;margin:0 auto;width:150px;}
    .box{height:28px;width:30px;float:left;position:relative;z-index:5;cursor:pointer;}
    .star{background-image:url('emptyStar.png');background-repeat:no-repeat;}
    .starHover{background-image:url('goldStar.png');background-repeat:no-repeat;}
    #voteBar{float:left;height:28px;background-color:#dbd923;position:relative;top:-28px;z-index:1;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.box').hover(
        // Handles the mouseover
        function() {
            $(this).prevAll().andSelf().addClass('starHover');
        },
        // Handles the mouseout
        function() {
            $(this).prevAll().andSelf().removeClass('starHover'); 
        }
    );
});

    function Cast(vote)
    {
        if(window.XMLHttpRequest)
        {
            xmlhttp = new XMLHttpRequest();
        }
        else
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                alert(xmlhttp.responseText);
                var json = JSON.parse(xmlhttp.responseText);
            }
        }

        xmlhttp.open("POST", "process.php", true);
        xmlhttp.send('vote=' + vote);
    }
</script>

</head>
<body>

<div id="container">
    <center>
        <div id="starContainer">
            <div class="box star" onclick="Cast(1)"></div>
            <div class="box star" onclick="Cast(2)"></div>
            <div class="box star" onclick="Cast(3)"></div>
            <div class="box star" onclick="Cast(4)"></div>
            <div class="box star" onclick="Cast(5)"></div>
            <div id="voteBar"></div>
        </div>
    </center>
</div>

</body>
</html>

PHP:

<?php
$vote = $_POST['vote'];

$totalVoteValue = 0;
$amtVotes = 1;

$width = (($totalVoteValue + (($vote - $totalVoteValue) / $amtVotes)) / 5) * 150;

echo $width;
?>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

笙痞 2024-11-25 14:31:39
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

添加此内容可能会有所帮助(打开后发送之前)

    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

adding this may help (before send after open)

晨曦÷微暖 2024-11-25 14:31:39

你已经在使用jquery(如果我可以说是一个非常非常老的版本..),为什么不使用它内置的ajax处理程序呢?
http://api.jquery.com/jQuery.post/

$.post('process.php', {vote: vote}, function(data) {
  $('.result').html(data);
});

You are already using jquery (a very very very old version if i may say..), why not use it's built in ajax handler?
http://api.jquery.com/jQuery.post/

$.post('process.php', {vote: vote}, function(data) {
  $('.result').html(data);
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文