jquery ajax

最新推荐文章于 2025-05-14 15:50:03 发布

原创最新推荐文章于 2025-05-14 15:50:03 发布 · 125 阅读

CC 4.0 BY-SA版权

ajax.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>
<style type="text/css">
.letters{
   float:left;
   margin-right:50px;
}
.quote-line{
color:#f00;
}
#loading{
display:none;
}
</style>
<script src="../jquery.js"/></script>
<script language="javascript">
jQuery(function(){
    $('#loading')
    .ajaxStart(function(){
    $("#dictionary").empty();
    $(this).show();
    })
    .ajaxStop(function(){
    $(this).hide();
    })

//#load html
   $("#letter-a a").click(function(){
      $("#dictionary").hide().load("a.html",function(){
      $(this).fadeIn();
      });
      return false;
   })
   //#load json
   $("#letter-b a").click(function(){
      $.getJSON("b.json",function(data){
      $("#dictionary").empty();
   $.each(data,function(entryIndex,entry){
        var html = "<div class='entry'>";
        html += "<h3 class='term'>"+entry['term']+'</h3>';
        html += "<div class='part'>"+entry['part']+'</div>';
        html += "<div class='definition'>";
        html += entry['definition'];
        if(entry['quote']){
         html += "<div class='quote'>";
         $.each(entry['quote'],function(lineIndex,line){
          html += "<div class='quote-line'>"+line+"</div>";
         })
         if(entry['author']){
          html += "<div class='quote-author'>"+entry['author']+"</div>";
         }
         html += "</div>";
        }
        html += "</div>";
        html += "</div>";
        $("#dictionary").append(html);
      })
      });
      return false;
   })
   //#load js
   $("#letter-c a").click(function(){
      $.getScript("c.js");
      return false;

   })
   //#load xml
   $("#letter-d a").click(function(){
      $.get("d.xml",function(data){
      $("#dictionary").empty();
      //$(data).find("entry:has(quote[author])").each(function(){
         $(data).find("entry").each(function(){
      var $entry = $(this);
      var html = "<div class='entry'>";
      html += "<h3 class='term'>"+$entry.attr('term')+"</h3>";
      html += "<div class='part'>"+$entry.attr("part")+"</div>";
      html += "<div class='definition'>";
      html += $entry.find('definition').text();
      var $quote = $entry.find("quote");
      if($quote.length){
        html += "<div class='quote'>";
        $quote.find("line").each(function(){
         html += "<div class='quote-line'>"+$(this).text()+"</div>";
        })
        if($quote.attr('author')){
         html += "<div class='quote-author'>"+$quote.attr('author')+"</div>";
        }
        html += "</div>";
      }
      html += "</div>";
      html += "</div>";
      $("#dictionary").append($(html));
      })
      })
      return false;
   })
   //load php
   $("#letter-e a").click(function(){
   /* $.get("e.php",{'term':$(this).text()},function(data){
   //$.post("e.php",{'term':$(this).text()},function(data){
   $("#dictionary").html(data);
   });*/
   //$("#dictionary").load("e.php",{'term':$(this).text()});

   $.get("e.php",{'term':$(this).text()},function(data){
   $("#dictionary").html(data);
   });
   return false;
   })
   $('.term').live('click',function(){
   $(this).siblings('.definition').slideToggle();
   })
   //serialize 表单提交
   $("#fm").submit(function(){
      $.post("f.php",$(this).serialize(),function(data){
      $("#dictionary").html(data);
      })
      return false;
   })
})
</script>
</head>
<body>
<form id="fm" method="POST" action="?">
<div class="letters">
<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-d">
    <h3><a href="#">D</a></h3>
</div>
   <div class="letter" id="letter-e">
    <h3>E</h3>
    <li><a href="e.php?term=BACCHUS">BACCHUS</a></li>
    <li><a href="e.php?term=BACKBITE">BACKBITE</a></li>
    <li><a href="e.php?term=BEARD">BEARD</a></li>
</div>
<input type="text" name="search" value="12341234" />
<input type="submit" name="subs" value="search" />
</div>
</form>
<div id="loading">Loading....</div>
<div id="dictionary"></div>
</body>
</html>

a.html

</style>
<script src="../jquery.js"/></script>
<script language="javascript">
jQuery(function(){

})
</script>
</head>
<body>
<div class="entry">
<h3 class="term">ABDICATION</h3>
<div class="part">n.</div>
<div class="definition">
歌名：冷血动物
歌手：谢天笑
专辑：谢天笑与冷血动物
我在水里也在陆上阳光照射着我没有意义
我在梦里在你怀里我在草里非常隐蔽
<div class="quote">
  <div class="quote-line">
   I've become so numb I can't feel you there
   I've become so tired so much more aware
   I've becoming this all I want to do
   Is be more like me and be less like you
   Can't you see that you're smothering me
  </div>
  <div class="quote-line">
   I've become so numb I can't feel you there
   I've become so tired so much more aware
   I've becoming this all I want to do
   Is be more like me and be less like you
   Can't you see that you're smothering me
  </div>
  <div class="quote-line">
   I've become so numb I can't feel you there
   I've become so tired so much more aware
   I've becoming this all I want to do
   Is be more like me and be less like you
   Can't you see that you're smothering me
  </div>
</div>
</div>
<div class="entry">
<h3 class="term">ABSOLUTE</h3>
   <div class="part">adj.</div>
    <div class="definition">
   We Will Rock You - 摇滚童话
   "Forever Young"
   Aah Buddy you're a boy
   Buddy you're a boy
   Buddy you're a boy make a big noise
   Playin' in the street gonna be a big man some day
   You got mud on yo' face
    </div>
</div>
</div>
</body>
</html>

b.json

[{
"term":"BACCHUS",
"part":"n.",
"definition":"每当夜深人静的时候",
"quote":[
"望着那灿烂的夜空",
"我会感到那里充满了",
"太多的梦想",
"告诉自己生命就像一场"
],
"author":"Jorace"
},
{
"term":"BACKBITE",
"part":"v.t,",
"definition":"我会感到那里充满了太多的梦想"
},
{
"term":"BEARD",
"part":"n.",
"definition":"太多的梦想告诉自己生命就像一场"
}
]

c.js

<?xml version="1.0" encoding="UTF-8"?>
<entries>
<entry term="DEFAME" part="v.t.">
  <definition>
   Artist: Sum 41
   Title: The Hell Song
   <a href='#'>aEverbody's</a> got their problems,
   everybody says the samething to you.
  </definition>
</entry>
<entry term="DEFENCELESS" part="adj.">
  <definition>
   Artist: Sum 41
  </definition>
</entry>
<entry term="DELUSION" part="n.">
  <definition>
   everybody says the samething to you.
  </definition>
  <quote author="Mumfrey Marppel">
    <line>Everbody's got their problems,</line>
    <line>their</line>
    <line>problems</line>
    <line>everybody</line>
  </quote>
</entry>
<entry term="DIE" part="v.t.">
  <definition>
   Artist: Sum 41
   Title: The Hell Song
   Everbody's got their problems,
   everybody says the samething to you.
  </definition>
  <quote>
    <line>Everbody's got their problems,</line>
    <line>their</line>
  </quote>
</entry>
</entries>

e.php

<?php
$entries = array(
"BACCHUS"=>array(
"part"=>"n.",
"definition"=>"每当夜深人静的时候",
"quote"=>array(
"望着那灿烂的夜空",
"我会感到那里充满了",
"太多的梦想",
"告诉自己生命就像一场"
),
"author"=>"Jorace",
),
"BACKBITE"=>array(
    "part"=>"v.t,",
"definition"=>"我会感到那里充满了太多的梦想"
),
"BEARD"=>array(
"part"=>"n.",
"definition"=>"太多的梦想告诉自己生命就像一场"
)
);
$term = strtoupper($_REQUEST['term']);
if(isset($term)){
  sleep(1);
  $entry = $entries[$term];
  $html = "<div class='entry'>";
  $html .= "<h3 class='term'>{$term}</h3>";
  $html .= "<div class='part'>{$entry['part']}</div>";
  if(isset($entry['quote'])){
   $html .= "<div class='quote'>";
   foreach ($entry['quote'] as $k=>$v){
    $html .= "<div class='quote-line'>{$v}</div>";
   }
   $html .= "</div>";
  }
  $html .= "</div>";
  echo $html;
}
?>