Question

我当然不熟悉Javascript（以及随后的AJAX）。我有一个单击按钮在页面上投票的按钮。点击后，页面会删除并展开该部分，以便您可以看到它下面的注释（这样选民就不会被评论所左右）。这很好用，但不幸的是，点击按钮实际上并没有加载PHP控制器来将投票提交给数据库。

查看：

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

我希望此按钮将投票提交给控制器。修复按钮以使其正常链接的最佳方法是什么？

Answer 1

$('ul.list1 li a').on('click', function(e) {
    e.preventDefault();
    $('a.button1').removeClass("active");
    $(this).parent().find('a.button1').addClass("active");

    $("div#content div.comments").fadeOut('slow')
    .load($(this).attr('href')).fadeIn('slow');

    var col1Height = $("div#left-pannel").height() -63 ;
    $('div#sidebar').css("min-height", col1Height );
});

如果您的视图以html的形式回显，

div#content div.comments将替换为来自服务器的新内容。

Answer 2

你的点击处理程序需要两件事：preventDefault（）和一个AJAX方法，比如jQuery的$ .ajax（）或$ .get（）。

preventDefault（）将阻止将页面导航到href值的默认操作。在click事件中添加一个参数来表示事件，并在其上调用preventDefault（）。

$ .ajax（）或$ .get（）将执行点击URL以投票的操作。我个人更喜欢$ .ajax（），它默认执行GET请求，但你可以将类型设置为POST。还有许多其他选项，例如dataType（json，text，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”将不再引用success函数中的clicked元素。其次，根据您提供的HTML，您需要找到的元素'a.button'，是被点击的元素。如果是这种情况，我们可以删除.parent（）。find（'a.button'）并直接对$ this进行操作。

有关jQuery.ajax（）的更多信息：http://api.jquery.com/jQuery.ajax/

随意提出有关代码的问题。我希望有所帮助！

Answer 3

在你的javascript代码的某个地方你需要实际调用Controller，

根据您构建控制器的方式，您可以执行类似的操作

$('ul.list1 li a').click(function() {
    $(this).parent().find('a.button1').addClass("active");
    $('div#content div.comments').load('http://url/to/the/controller/plus/params/to/cast/the/vote');

    $("div#content div.comments").fadeIn('slow');
    var col1Height = $("div#left-pannel").height() -63 ;
    $('div#sidebar').css("min-height", col1Height );
    return false;
});

如果您希望控制器上的后置变量，请求会有所不同。

另外我假设你的html中有某个div.com。

您可以从处理请求的控制器发布方法吗？

Answer 4

这样的事情应该这样做：

$('ul.list1 li a').click(function() {
    var a = this;

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

Answer 5

您需要对控制器进行AJAX调用

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

JS：

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

  var obj = $(this);

  $.get(obj.attr('href'),function(res){
    if(res == 1) //assuming your controller returns 1 on success
    {
      $('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 );
    }
  });
});

Answer 6

这个怎么样：

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 );
    var post = $(this).attr('id');
    $.ajax({
       url: '<?=base_url()?>vote/submit_vote/' + post +'/1/1'
    });
});

HTML：

<div class="vote clearfix">
    <ul class="list1 clearfix">
        <li class="css3">
            <a id="<?=$post?>" href="#" class="button1 css3">
            <span>Button Text</span></a>
        </li>
    </ul>
</div>

CI - 使用Javascript按钮加载控制器

6 个答案: