Question

我最近创建了一个左侧有菜单栏的网站。我的下一步是根据您在菜单中选择的选项更新页面右侧的内容。我知道你可以使用iframe，但我想知道是否有替代它，就像一个更有活力的一个！

大多数菜单选项都是输入形式，我读过有关ajax调用以填充div但是找不到如何实现它的好教程。

编辑：

这是草图http://imageshack.us/photo/my-images/16/smlithis.png/

Answer 1

考虑使用JQuery。处理Ajax请求比使用普通JS要容易得多。 ajax函数的文档：http://api.jquery.com/jQuery.ajax/

使用成功回调（成功时执行的功能），您可以填写您的div：

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

而不是.result，将选择器指向主div。 .html（）函数用data填充你的div，这是从ajax请求返回的数据。

修改：现在是2018.使用Fetch API。

Answer 2

您可以使用jQuery 这就是菜单按钮的样子：

<a href='#' onclick='return fillDiv(1)'>GoTo1</a>  
<script>  
function fillDiv(pageNum){
  $("#id_of_div_to_load_to").load("some_page.php",{ 'pahe_num': pageNum } );  
return false;  
}
</script>

这只是众多方法中的一种。

Answer 3

Ajax可以从服务器获取数据，但无法填充任何内容。 Ajax只是用于与服务器通信的javascript。 Javascript可以获取该数据并插入数据并创建元素以填充该div。

Answer 4

你的意思是这样的： How to update div when on select change in jquery

如果您确实想要从其他来源动态获取数据，那将是完全不同的事情。

用ajax填充div？

4 个答案: