简体   繁体   English

页面加载时得到ajax响应?

[英]getting ajax response when the page loads?

Im creating a star rating system and it works but need to have the current amount of votes to be displayed when the page loads and im having issues implementing this with the code i have to work with due to the plugin source code and its ajax as its not a language im very familiar with. 我创建了一个星级评分系统,并且可以正常工作,但是需要在页面加载时显示当前投票数,并且由于插件源代码及其ajax的原因,我在使用该代码实施该代码时遇到问题不是一种我不太熟悉的语言。

It puts the current votes in the element i want it to when a the click handler is activated by selecting a rating but really not sure if i need to add to the current function or create a new one and if so how do i get it not to conflict with the current one. 当通过选择等级激活单击处理程序时,它将当前选票放入我想要的元素中,但是真的不确定我是否需要添加到当前函数或创建一个新函数,如果不能,我如何获得它?与当前的冲突。

thanks in advance. 提前致谢。

<!DOCTYPE html>
<html lang="en">
<?php require 'core/init.php'; ?>
<head>
    <meta charset="utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <table>
            <tr>
                <td><div id="randomtest" class="star"></div></td>
                <td id="cvotes"></td>
            </tr>
        </table> 
    </div>

    <script type="text/javascript" src="star/assets/js/jquery.raty.min.js"></script>
    <script type="text/javascript">

    $(function() {
        $.fn.raty.defaults.path = 'star/assets/img';
        $('.star').raty({

            half      : true,
            number    : 5,
            score     : 3,

            click: function(score, evt) {
            /*implement this for only click once 
             * $(this).find('img').unbind('click');
             */

            var pid=$(this).prop('id');

                $.ajax({
                url: 'rate.php',
                data: { score: score, pid:pid },
                type: 'POST',

                success: function (data) {
                    $('#cvotes').empty().append(data + ' Votes.'); // this needs to be done on page load too!
                },
                error: function (jxhr, msg, err) {
                    $('#cvotes').append('<li style="color:red">' + msg + '</li>');
                }
                });
            }
        });
    });
    </script>
</body>
</html>

You should be aware that since you are using #cvotes as a unique element on the page every result will appear on this single element no matter how many .star elements you have on page. 您应该意识到,由于在页面上使用#cvotes作为唯一元素,因此无论页面上有多少.star元素,每个结果都会显示在该元素上。

for the rating data to be loaded at the right time you have to do ajax get request after you initiate your raty plugin. 为了在正确的时间加载评级数据,您必须在启动Raty插件后执行ajax get请求。

you should really do it inside the plugin code, but doing it on pageready like this should also work 您应该确实在插件代码中执行此操作,但在pageready上执行此操作也应该可行

<script type="text/javascript">

$(function() {

    function onRateResultsSuccess(data) {
        $('#cvotes').empty().append(data + ' Votes.'); 
    }

    function onRateResultsError(data) {
        $('#cvotes').append('<li style="color:red">' + msg + '</li>');
    }

    $.fn.raty.defaults.path = 'star/assets/img';
    $('.star').raty({

        half      : true,
        number    : 5,
        score     : 3,

        click: function(score, evt) {
        /*implement this for only click once 
         * $(this).find('img').unbind('click');
         */

        var pid=$(this).prop('id');

            $.ajax({
            url: 'rate.php',
            data: { score: score, pid:pid },
            type: 'POST',

            success: onRateResultsSuccess,
            error: onRateResultsError
            });
        }
    });

    // this should really be inside the raty plugin init as well as the click handler

    // for every .star element
    $('.star').each(function () {

            var pid=$(this).prop('id');

            // use http get
            $.get('rate.php', { pid:pid } ,onRateResultsSuccess).fail(onRateResultsError);
    });
});
</script>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM