2

ajax 成功执行后，如何更改 ajax 链接的 URL 参数？以下代码不起作用，但解释了我想要做什么。

CHtml::ajaxLink($text, array('/core/bookmark/create'), array(
    'data' => array("id" => $id),
    'type' => 'GET',
    'success'=>'js:function(data){
        if (data.status == "success"){ 
            //attempt to dynamically change the URL
            this.url = "/core/bookmark/delete";
            $("#bookmark-btn").toggleClass("bookmark_on").toggleClass("bookmark_off");
        }
    }',
), array('id'=>'bookmark-btn', 'class' => 'bookmark_off'));

带有的行this.url对 ajaxLink 的 URL 没有影响，但它也不会在控制台中引发任何错误。

4

3 回答 3

2

CHtml::ajaxLink渲染a元素，它没有url属性。你需要这样的代码：

if (data.status == "success"){ 
    jQuery(this).attr('href', '/core/bookmark/delete');
}

更新：

此外，我想要做的是更改单击链接时触发的 Ajax 函数中的 URL，而不是更改链接本身。

在这种情况下，更好的解决方案是绘制两个CHtml::ajaxLink元素并根据 ajax-requests 结果切换它们的可见性。它会花费你更少的精力。

于 2012-11-12T14:47:51.237 回答
1

您当前方法的问题是双重的：

  1. .url 属性是指文档 URL，而不是链接的 URL
  2. 您真正想要更改的是在 javascript 的事件处理程序中执行的操作，而不是 DOM 的一部分

我认为要获得你想要的行为，你需要在你的控制器中处理这个，以及稍微修改你的 ajaxLink 以跟踪状态。

CHtml::ajaxLink($text, array('/core/bookmark/create'), array(
    'data' => array("id" => $id, "state"=>$("#bookmark-btn").hasClass("bookmark_on") ),
    'type' => 'GET',
    'success'=>'js:function(data){
        if (data.status == "success"){ 
            var bookmarkState = $("#bookmark-btn").hasClass("bookmark_on");
            if (!bookmarkState) {
                $("#bookmark-btn").addClass("bookmark_on").removeClass("bookmark_off");
                // Probably need some code here to update the link text as well
            } else {
                $("#bookmark-btn").addClass("bookmark_off").removeClass("bookmark_on");
                // Probably need some code here to update the link text as well
            }
        }
    }',
), array('id'=>'bookmark-btn', 'class' => 'bookmark_off'));

然后，在您的控制器中（我可能会将其重命名create为更通用的名称，例如handleBookmark），您需要检查 的值state，然后调用现有的create或delete您已经编写的操作。

或者，您可以通过 jQuery 在客户端执行此操作，但您必须编写自定义触发器和操作（很可能读取 的值$("#bookmark-btn")，并在那里使用不同的 javascript 路径）。这意味着您需要直接编写 javascript，而不是使用 YiiajaxLink便捷方法。

如前所述，更简单的方法可能是同时渲染 anadd和deletelink 并根据需要切换可见性。

于 2012-11-12T17:51:41.753 回答
1

为什么你的方法不起作用

这不起作用的实际原因是您正在更改当前jquery ajax 对象的 url 属性，而不是未来对象的 url。当您看到生成的 html/js 时，这变得很明显：

关联：

<a href="#" class="bookmark_off" id="bookmark-btn">value-of-text</a>

事件监听器（以下通常在最后一个找到<script>，</body>我也添加了一些评论）：

$('body').on('click','#bookmark-btn',function(){
    jQuery.ajax({'data':{'id':1},'type':'GET',
        'success':js:function(data){
            if (data.status == "success"){
                //attempt to dynamically change the URL
                this.url = "/core/bookmark/delete";
                $("#bookmark-btn").toggleClass("bookmark_on").toggleClass("bookmark_off");
            }
        },
        'url':'/project-name/index.php/core/bookmark/create', // this url is used repeatedly
        'cache':false
    }); // ajax call ends
    return false; // click handler ends
});

上面的监听器显示，每次点击都会创建/完成一个新的ajax 对象/调用，因此每次只更改该对象的 url，但不会更改下一个对象，该对象将为下一次调用创建。对于下一次调用，将使用相同的旧 url，即 : 'url':'/project-name/index.php/core/bookmark/create',。

解决方案

有一种方法可以“动态更改 ajax 链接的 url”。而不是使用CHtml::ajaxLink，使用普通CHtml::link的，但添加了clientChange选项。clientChange选项包含在第三个参数to 中，CHtml::link即within htmlOptions。这样我们就可以为 ajax 调用指定一个动态 url，它将使用为 ajax 调用生成href的<a>标签，而不是静态 url。

一个例子（阅读代码中的注释）：

echo CHtml::link($text, array('/core/bookmark/create'), array(
    // the htmlOptions array, with clientOptions included
    'id'=>'bookmark-btn',
    'class' => 'bookmark_off',
    'return' => false, // this is already false by default - read documentation
    'ajax' => array( // now specify the ajax options, with a dynamic url
        'url' => 'js:$(this).attr("href")', // this takes the href property of
                // the <a> tag that is generated for this CHtml::link
        'data' => array('id' => $id),
        'custom_data_passed_to_ajax_object' => 'js:this', // this is important,
                // here we pass link, <a> tag, for use within the ajax object
        'success'=>'function(data){
            if (data.status == "success"){ 
                // now change the href of the <a> we passed in custom_data_passed_to_ajax_object
                $(this.custom_data_passed_to_ajax_object).attr("href",
                    "'.$this->createUrl('/core/bookmark/delete').'");
                $("#bookmark-btn").toggleClass("bookmark_on").toggleClass("bookmark_off");
            }
        }'
    )
));

您实际上ajaxLink也可以将上述解决方案调整为：

echo CHtml::ajaxLink($text,
    'js:$(this).attr("href")', // this will be generated as 'url':$(this).attr("href")
    array(// ajax options, remember to pass the reference to the <a>,
        // i.e custom_data_passed_to_ajax_object in the above snippet
    ),
    array(
        'href'=>$this->createUrl('/core/bookmark/create'), // your actual url
        // rest of htmlOptions
    )
);

至于您的最终目标“实现一个书签按钮，在每次点击时在添加和删除功能之间切换”，其他人已经给了你足够的提示。

于 2012-11-13T22:19:21.117 回答