jQuery/AJAX - 单击按钮时将内容加载到 div 中？答案

【问题标题】：jQuery/AJAX - Load content into a div when button clicked?jQuery/AJAX - 单击按钮时将内容加载到 div 中？
【发布时间】：2012-03-20 13:15:08
【问题描述】：

有人可以帮忙吗？

我想填充一个 div，例如

<div id="contenthere"></div>

包含来自外部文件的内容，例如

/includes/about-info.html

当点击某个类的按钮时，例如

<p class="classloader">Click Here</p>

有没有人有一个快速的代码示例可以向我展示来实现这一点？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

使用jQuery.click 和jQuery.load：

$(document).ready(function(){
    $('.classloader.').click(function(){
        $('#contenthere').load('/includes/about-info.html');
    });
})

【讨论】：

【解决方案2】：

加载最新版本的jQuery：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

jQuery 代码：

<script language="javascript">
$(function(){
  $(".classloader").click(function(){
    $("#contenthere").load("/includes/about-info.html");
  });
});
</script>

HTML 代码：

<p class="classloader">Click Here</p>
<div id="contenthere"></div>

【讨论】：

【解决方案3】：

您可以订阅段落的.click() 事件，然后使用.load() 函数向给定的url 发送AJAX 请求并将结果注入指定的选择器：

$(function() {
    $('.classloader').click(function() {
        $('#contenthere').load('/includes/about-info.html');
        return false;
    });
});

【讨论】：

【解决方案4】：

尝试以下方法：

var myurl = 'myfileonthesamedomain.html';

$('button').click(function(){
    $('div.loadme').load(myurl);
});

【讨论】：

【解决方案5】：

使用这个简单而清醒的方法，它也可以进行运行时绑定：

$(document).ready(function(){
    $(document).on('click','.classloader',(function(){
        $('#contenthere').load('/includes/about-info.html');
    });
})

【讨论】：