如何在按钮单击时将 html 内容（不是页面）加载到 div 中答案

【问题标题】：How to load html content(not a page) into a div on button click如何在按钮单击时将 html 内容（不是页面）加载到 div 中
【发布时间】：2013-05-05 22:46:58
【问题描述】：

我有一个包含以下代码的表单

<div class="data" data-id="sports">
<div class="data-inner"></div>
</div>

我有一个包含左侧导航栏和中间内容的 html 页面。左侧导航包含类别列表

<li class="nav"><?=$sports?></li>

并且容器有以下div

<div class="container">
// js file that supports the iframe to be loaded on my page
   <div class="data" data-id="sports">
<div class="data-inner"></div>
</div>

</div>

我使用 ajax，并尝试打印单击 li 后返回的数据。由于正在加载的内容是 html，因此数据（iframe）在导航容器中加载，而不是在 .container 类中加载

更新

    <script type="text/javascript">    
    $(function(){
        $('#order li').click(function(){
        $('.container').html('');

        alert($(this).attr("nav"));
        });
        });
</script>

所以，如果我点击运动，对应于 data-id="sports" 的 div 部分将被加载，如果点击 Games，则以同样的方式 data-id="games" > 将被加载。游戏的 div 部分看起来像

   <div class="data" data-id="games">
    <div class="data-inner"></div>
    </div>

最初我使用 iframes，但由于 iframe 没有正确调整，我被告知要使用此代码

希望你现在明白了！

我对 javascript 了解不多。请帮忙

【问题讨论】：

能否请您提供您当前使用的代码？这真的会帮助我们准确了解您要做什么。
是的，我更新了我的帖子。请看一下
您没有包含 AJAX 代码。将新 HMTL 插入文档的代码在哪里？
对不起，我正在使用 javascript

标签： jquery html ajax iframe

【解决方案1】：

根据您对您正在尝试做的事情的解释，我假设此代码：

<li class="nav"><?=$sports?></li>

将填充一个您希望在单击 li 时加载的文件名。

e.g.
<li class="nav">baseball.html</li>
<li class="nav">football.html</li>
<li class="nav">soccer.html</li>

如果是这种情况，那么当点击其中一项运动（文件名）时，此代码会将文件加载到 .container 中

$(function(){
    // attach click event to each li element with class "nav"
    $('li .nav').on("click", function(){
        // assuming each li will show the name of a file to load using AJAX, do this
        // load the container div with the file you just clicked on (i.e. $(this) is li ) 
        $('.container').load( $(this).text() );

    });
});

【讨论】：

不，它不是文件名，它是我想在按钮单击时加载的 html div 部分。也会从数据库中检索 div 部分
如果它不是一个文件，那么你可以这样做 $('.container').html( $(this).html() );或者你可以使用 append()

【解决方案2】：

您的原始问题中缺少很多相关的难题。

但无论如何。在您的页面上尝试此 Javascript 代码。至少它可以作为你的模板。

<script type="text/javascript">

$(function(){

    var button = $('a.nav');
    var container = $('div.container').first(); // .first() ensures that only a single div will be used, not many
    var url = 'http://www.yoursite.com/data_from_where_to_load.php';

    button.click(function(){

        var condition = confirm("Load data: Click YES for iframe, click NO for Ajax. ");

        container.html('');

        if(condition){ // load with iframe
            var iframe = $("<iframe />");
            iframe.attr('src',url).appendTo(container);
            iframe.ready(function(){
                alert('if you can see this, probably the iframe just loaded');  
            });

        }else{ // load with Ajax
            $.ajax({
                url: url, dataType:'html', complete:function(r){
                    container.html(r.responseText); 
                    alert('done loading via ajax');
                }
            });
        }

    });

});

</script>

【讨论】：