javascript - CI - 使用 Javascript 按钮加载 Controller

Question

诚然，我对 Javascript(以及后来的 AJAX)不是很精通。我有一个按钮，您可以单击该按钮在页面上投票。单击后，页面会下降并展开该部分，以便您可以看到它下面的评论(这样选民就不会被评论影响)。这工作得很好，但不幸的是，单击按钮实际上并没有加载 PHP Controller 以将投票提交到数据库。

查看:

<div class="vote clearfix">
    <ul class="list1 clearfix">
        <li class="css3">
            <a href="<?=base_url()?>vote/submit_vote/<?=$post?>/1/1" class="button1 css3">
            <span>Button Text</span></a>
        </li>
    </ul>
</div>

JavaScript:

$('ul.list1 li a').click(function() {
    $('a.button1').removeClass("active");
    $(this).parent().find('a.button1').addClass("active");
    $("div#content div.comments").fadeIn('slow');
    var col1Height = $("div#left-pannel").height() -63 ;
    $('div#sidebar').css("min-height", col1Height );
    return false;
});

我想要这个按钮将投票提交给 Controller 。修复按钮以使其正常链接的最佳方法是什么？

Answer 1

您的点击处理程序需要两个东西:preventDefault() 和一个 AJAX 方法，例如 jQuery 的 $.ajax() 或 $.get()。

preventDefault() 将阻止将页面导航到 href 值的默认操作。向点击事件添加一个参数来表示该事件，并对其调用 preventDefault()。

$.ajax() 或 $.get() 将执行点击 URL 进行投票的操作。我个人更喜欢 $.ajax()，它默认执行 GET 请求，但您可以将类型设置为 POST。还有许多其他选项可用，例如数据类型(json、文本、xml 等)。成功和错误函数也很容易实现。

JavaScript:

$('ul.list1 li a').click(function(e) {
    e.preventDefault();

    // cache this for scope change
    var $this = $(this);

    $.ajax({
        url: this.href,
        success: function() {
            // your original JavaScript here
            $('a.button1').removeClass('active');

            $this.addClass('active'); // no need for .parent().find()

            $('div#content div.comments').fadeIn('slow');
            var col1Height = $("div#left-pannel").height() - 63;
            $('div#sidebar').css("min-height", col1Height);
        },
        error: function() {
            alert('Sorry, your vote was not successful.');
        }
    });
});

我还更改了您在代码中调用 addClass() 的方式。首先，我们需要缓存 $(this) 因为“this”将不再引用成功函数中被点击的元素。其次，根据您提供的 HTML，您需要查找的元素“a.button”是被单击的元素。如果是这种情况，我们可以删除 .parent().find('a.button') 并直接对 $this 进行操作。

关于 jQuery.ajax() 的更多信息:http://api.jquery.com/jQuery.ajax/

请随时提出有关代码的问题。希望对您有所帮助!