Question

如何在成功执行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没有影响，但它也不会在控制台中引发任何错误。

Answer 1

CHtml::ajaxLink呈现a元素，该元素没有url属性。你需要这样的代码：

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

<强>更新

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

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

Answer 2

您当前的方法存在两个问题：

.url属性是指文档URL，而不是链接的URL
你真正想要改变的是在中执行的动作 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，而不是使用Yii ajaxLink便捷方法。

正如已经指出的，更简单的方法可能是呈现add和delete链接，并根据需要切换可见性。

Answer 3

为什么你的方法不起作用

这不起作用的实际原因是您正在更改当前 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
});

上面的监听器显示，每次点击都会创建/完成 new ajax对象/调用，因此每次只有对象的url被更改，但<？> strong> next 对象，将为下次调用创建。对于下一个电话，将使用相同的旧网址，即：'url':'/project-name/index.php/core/bookmark/create',。

解决方案

有一种方法可以“动态更改ajax链接的URL”。不是使用CHtml::ajaxLink，而是使用normal CHtml::link，但添加了clientChange options。 clientChange选项包含在CHtml::link的第三个参数中，即htmlOptions内。通过这种方式，我们可以为ajax调用指定动态网址，该网址将使用为ajax调用生成的href标记的<a>，而不是静态网址。

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

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

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

成功时动态更改Yii ajaxLink的URL

3 个答案:

为什么你的方法不起作用

解决方案