jquery随记----ajax基于请求加载数据(追加html)

来源:互联网 发布:js 控制图片 90度旋转 编辑:程序博客网 时间:2024/05/16 06:46
 

******************************************************************************************************************************

 load(url)加载url指定的网页

**********************************************************************************************************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#letter-a a').click(function(){
  $('#dictionary').load('a.html');
  alert("load……");
  return false;
  })
 })
</script>
</head>
<body>
    <div class="letters" style="float:left;">
     <div class="letter" id="letter-a">
         <h3><a href="#">A</a></h3>
        </div>
        <div class="letter" id="letter-b">
         <h3><a href="#">B</a></h3>
        </div>
        <div class="letter" id="letter-c">
         <h3><a href="#">C</a></h3>
        </div>
        <div class="letter" id="letter-c">
         <h3><a href="#">D</a></h3>
        </div>
    </div>        
    <div id="dictionary" style="float:right;">
    </div>   
</body>
</html>

 ******************************************************************************************************************************

以下是:a.html

**********************************************************************************************************************************

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 alert(document.getElementById("radio1").value);
 })
</script>
</head>
<body>
 <div class="entry">
     <h3 class="term">ABDICATION</h3>
        <div class="part">n.</div>
        <div class="definition">
         An act whereby a soverign attests his sense of the high
            temperature of the throne.
         </div>
        
         <div class="quote">
          <div class="quote-line"> Poor Isabella's Dead,whose
             abdication
            </div>
            <div class="quote-line"> Set all tongues wagging in the
             Spanish nation
            </div>
            <div class="quote-line"> For that performance 'twere
              unfair to scolf her:
            </div>
            <div class="quote-line"> She wisely left a throne too
             hot to hold her.
            </div>
            <div class="quote-line"> To History she'll be no royal
             riddle &mdash;
            </div>
            <div class="quote-line"> Merely a plain parched pea that
             jumped the griddle.
            </div>
            <div class="quote-line"> G.J.</div>          
         </div>
        
         <div class="entry">
          <h3 class="term">ABSOLUTE</h3>
            <div class="part">adj.</div>
            <div class="definition">
             Independent,irresponsible.An absolute monarchy is one
                in which the sovereign does as he pleases so long as he
                pleases the assassins.Not many absolute monarchies are
                left,most of them having been replaced by limited
                monarchies,where the soverign's power for evil (and for
                good) is geratly curtailed.and by republics, which are
                governed by chance.
            </div>
          
         </div>
    </div>
</body>
</html>

  

 

 

 

 

 

 

 

 

 

 

 

 

原创粉丝点击