如何使用AJAX来加载新的页面到DIV [英] How to use ajax to load new page into div

查看:120
本文介绍了如何使用AJAX来加载新的页面到DIV的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的网站包含两个页面。我试图加载第2页为一个div一个页面上,然后的onclick显示2页。我尝试使用下面的code这是行不通的。我是个新手,所以我道歉,如果这仅仅是愚蠢的问题。

 <!DOCTYPE HTML>
< HTML>
< HEAD>
&所述;脚本的src =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>
< / SCRIPT>
<脚本>
$(文件)。就绪(函数(){
  $(按钮)。点击(函数(){
    $阿贾克斯(网址:{url:myPage2.html,成功:函数(结果){
      $(#DIV1)HTML(结果);
    }});
  });
});
< / SCRIPT>
< /头>
<身体GT;

< D​​IV ID =div1的>< H2>让jQuery的AJAX更改此文字< / H>< / DIV>
<按钮>获取外部含量小于/按钮>

< /身体GT;
< / HTML>
 

解决方案

您的问题是不是你的code。正如你可以在这个Plnkr 的运行没有任何问题。

借助 .load() 功能可以简化您目前的code,但它不会解决你的实际问题,因为它只是语法糖。

由于某种原因,您的浏览器无法找到 myPage2.html ,因此无法正确显示。

My site consists of two pages. I'm trying to load Page 2 into a div on page one, then display page 2 onclick. I'm trying to use the following code which isn't working. I'm a newbie so my apologies if this is just dumb question.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url:"myPage2.html",success:function(result){
      $("#div1").html(result);
    }});
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>

</body>
</html>

解决方案

Your problem isn't your code. As you can see in this Plnkr it runs without any problems.

The .load() function can simplify your current code, but it won't solve your real problem, since it's just syntax sugar.

For some reason your browser fails to locate myPage2.html, and therefore can't display it correctly.

这篇关于如何使用AJAX来加载新的页面到DIV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆