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

我承认我对Javascript（以及随后的AJAX）不是很精通。我有一个按钮，你可以点击在页面上投票。单击后，页面将删除并展开部分，以便您可以看到下面的评论（这样投票者就不会被评论所左右）。这工作得很好，但不幸的是，单击按钮实际上并没有加载PHP控制器以将投票提交到数据库

视图：

---

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

在javascript代码的某个地方，您需要实际调用控制器

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

$('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;
});

如果您希望控制器上有post变量，那么请求会有点不同

我还假设在html中的某个地方有一个div.comments

---

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

类似的方法应该可以做到这一点：

$('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;
});

---

div#content div.comments

将被服务器上的新内容替换，如果您的视图以html的形式出现任何内容。

您需要向控制器发出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>

这个怎么样：

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

$（'ul.list1 li a'）。单击（函数（）{
$（'a.button1'）。removeClass（“活动”）；
$（this）.parent（）.find（'a.button1'）.addClass（“活动”）；
$（“div#content div.comments”）.fadeIn（'slow'）；
var col1Height=$（“div#left pannel”）.height（）-63；
$（'div#sidebar'）.css（“最小高度”，col1Height）；
var post=$（this.attr（'id'）；
$.ajax({
url:'vote/submit_vote/'+post+'/1/1'
});
});

HTML:

您的点击处理程序需要两件事：preventDefault（）和AJAX方法，如jQuery的$.AJAX（）或$.get（）

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

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

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

$('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函数中单击的元素。其次，根据您提供的HTML，您需要查找的元素“a.button”就是单击的元素。如果是这种情况，我们可以删除.parent（）.find（'a.button'），直接对$this进行操作

有关jQuery.ajax（）的详细信息：

---

请随意询问有关代码的问题。我希望这有帮助

对不起，耽搁了。问题是根本没有加载控制器。问题是JS位于一个单独的文件中，需要动态生成url。@BlackPlanet您可以这样使用：

$（'div#content div.comments'）.load（$（this.attr（'href'））而不是
$（'div#content div.comments'）。加载（'http://url/to/the/controller/plus/params/to/cast/the/vote');
这可以发布投票结果（谢谢！！），但它破坏了fadeIn效果。试试看，在内容加载后，它才
fadeIn
。。这似乎没有什么不同。对不起，我是个笨蛋。我只是在学习JS/AJAX。严格地说是一个PHP的家伙。你有我可以看的测试页面吗？实际上我只是更新了它，在加载之前隐藏了评论div，然后是fadeIn，这应该是div的内容。在点击投票按钮之前，页面上已经加载了评论？这完全符合我的要求。你杀了它，伙计，谢谢！！！谢谢大家的反馈。这真是让人大开眼界。我很高兴这很有帮助。我也非常感谢您的反馈！
$('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 );
    }
  });
});

$('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'
    });
});

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

$('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.');
        }
    });
});