当用户单击选项卡时，如何进行 ajax 调用？答案

【问题标题】：How can I make an ajax call when user clicks on a Tab?当用户单击选项卡时，如何进行 ajax 调用？
【发布时间】：2014-02-10 19:43:57
【问题描述】：

如何在用户单击选项卡时进行 ajax 调用？
如何处理 html 响应并将其显示在选项卡中？
如何在响应的 html 上绑定 JavaScript 事件？

我知道如何使用 jQueryUI 选项卡以及如何进行 ajax 调用？

当用户单击 CKEditor 中的选项卡时，我不知道如何触发 Ajax 调用？

这是我为在 CKEditor 内的图像对话框上显示“测试”选项卡而编写的。

CKEDITOR.on( 'dialogDefinition', function( ev )
{
    // Take the dialog name and its definition from the event
    // data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    // Check if the definition is from the dialog we're
    // interested on (the "Link" dialog).
    if ( dialogName == 'image' )
    {

        // Add a new tab to the "Link" dialog.
        dialogDefinition.addContents({
            id : 'customTab',
            label : 'Test',
            accessKey : 'M',
            elements : [
                {
                    id : 'myField1',
                    type : 'text',
                    label : 'My Text Field'
                },
                {
                    id : 'myField2',
                    type : 'text',
                    label : 'Another Text Field'
                },
                {
                    type : 'html',
                    html : '<input type="text" name="query" id="query" class="left new-search-box file_dialog_query" style="width:300px !important;" defaulttext="Search Files" value="Search Files">'
                },
            ]
        });

    }
});

【问题讨论】：

你能创建一个jsfiddle吗？
阅读基本的ajax tutos怎么样？？？
将点击事件添加到导致ajax请求的选项卡，将来自ajax请求的响应附加到选项卡中，然后附加事件。
我猜标签插件会在更改时发出一个事件（例如change）。监听该事件并启动 ajax 调用。
Trigger a function when a jQuery UI tab is clicked/made active? 的可能重复项

标签： javascript jquery ajax ckeditor

【解决方案1】：

http://jqueryui.com/tabs/#ajax

$( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
            ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                "If this wouldn't be a demo." );
        });
    }
});

【讨论】：

【解决方案2】：

为此，请按照以下步骤操作

创建一个包含两个部分 A 和 B 的 html 文件。A 包含选项卡，B 包含内容。默认情况下，使选项卡 1 处于活动状态。
单击选项卡时捕获单击事件并在其中调用 Ajax 以获取数据。在成功响应中，将 b 内容替换为数据。同时更改选项卡的样式以使新选项卡处于活动状态。

您可以通过 jQuery.Ajax 方法进行 ajax 调用，您可以在其中传递您的 url，您必须从那里获取数据。在成功响应中，您将获得 Url 返回的所有数据。

您不必在此页面上为新内容绑定 JavaScript 事件。您可以在执行 Ajax 调用时将其绑定到您的 Url 返回的 html 中。

希望对你有帮助。

【讨论】：

【解决方案3】：

对于这个元素，使用 jQuery 或内联定义事件 ether。

jQuery;例如 elemtn 有 id="tab"

$("#tab").click(function(){
    //ajax call
});

内联

<div onclick="ajaxCallFunction()">Tab</div>
<script>//you have to define this function somewhere
function ajaxCallFunction(){
//define ajax call
}
</script>

如果您的响应已经按照应有的方式进行结构化，那么您可以将其设置为容器的 innerHtml（父元素）例如

//if you can get element by ID
var container=document.getElementById('container id').innerHtml=response;

对于绑定事件，在代码中创建 HTML 结构可能更安全，但最好将响应作为 JSON。在这个（使用 html 时）解决方案中，我建议在设置此 innerHtml 的同一函数中，但在设置将设置事件的 innerHtml 调用函数之后。

例如

//if this structured HTML have element <div id="x"></div>
$("#x").click(function(){
//OR any other event, check jquery documentation for other events
});
//IMPORTANT IS THAT YOU CALL THIS SETTING OF EVENT AFTER YOU ADDED NEW HTML

【讨论】：