jquery ajax 传递数值的问题。

刚学 jquery ajax 遇到一些问题。
我想完成：点击div#send1,div#send2,div#send3,传递各自的数值到b.php，并且返回b.php的数值到页面的div#result,div#text。
问题是，
1. 现在我的代码每点击一次，div#result,div#text里都会不断的生成数据。如何做到每次返回新的数据时，立即覆盖掉原有的数据？
2. 帮忙看下 function  clickable() 写的是不是合理，能否优化简化代码？
<html>
<head>
</head>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script> 
<script language="javascript">  function  clickable1() { 
    $("#result").html('<img src="loading.gif" />'); 
    $("#text").html('<img src="loading.gif" />'); 
    $.ajax({        
      url:'b.php',        
      type:'post',                 
      dataType:'html',            
      data:"value=" + $('#send1').text(),                 
      success:data1     
    });
  }
  function data1 (html) {
    var $html = $( html );       
    $html.filter('#aa').appendTo("#result");
    $html.filter('#bb').appendTo("#text");  
  }
  function  clickable2() { 
    $("#result").html('<img src="loading.gif" />'); 
    $("#text").html('<img src="loading.gif" />'); 
    $.ajax({        
      url:'b.php',        
      type:'post',                 
      dataType:'html',            
      data: "value=" + $('#send2').text(),                 
      success:data2     
    });
  }
  function data2 (html) {
    var $html = $( html );       
    $html.filter('#aa').appendTo("#result");
    $html.filter('#bb').appendTo("#text");  
  }
  function  clickable3() { 
    $("#result").html('<img src="loading.gif" />'); 
    $("#text").html('<img src="loading.gif" />'); 
    $.ajax({        
      url:'b.php',        
      type:'post',                 
      dataType:'html',            
      data:"value=" + $('#send3').text(),                 
      success:data3     
    });
  }
  function data3 (html) {
    var $html = $( html );       
    $html.filter('#aa').appendTo("#result");
    $html.filter('#bb').appendTo("#text");  
  }</script> 
<body> 
  <div id="result"></div>
  <div id="text"></div>
  <a id="send1" onClick='clickable1();'>apple</a>
  <a id="send2" onClick='clickable2();'>orange</a>
  <a id="send3" onClick='clickable3();'>aaa</a>
</body>
</html><?php
  echo '<div id="aa">';
  echo 'This is an '.$_REQUEST['value'].'.'; 
  echo '</div>';
  echo '<div id="bb">';
  echo 'A sweet '.$_REQUEST['value'].'.'; 
  echo '</div>';
?>

解决方案 »

  1.   

      $html.filter('#aa').appendTo("#result");
        $html.filter('#bb').appendTo("#text");  appendTo是会不断地加结果，楼主如果想更新整个结果就直接用html()
    $("#result").html($html.filter('#aa'))另外clickable1，2，3结构一样，参数不同而已，而且data1,2,3是一模一样的把
      

  2.   

    showenxxx， 感谢，$("#result").html($html.filter('#aa'))，的确不再不断增加了。另外，clickable1，2，3结构一样，参数不同而已，而且data1,2,3是一模一样的。
    怎么合并这些JS呢？要不代码太冗长了，不美观。
      

  3.   

    clickable1，2，3只用一个即可，统一用clickable. 
    function  clickable1() { 
        $("#result").html('<img src="loading.gif" />'); 
        $("#text").html('<img src="loading.gif" />'); 
        $.ajax({        
          url:'b.php',        
          type:'post',                 
          dataType:'html',            
          data:"value=" + $('#send1').text(),                 
          success:data1     
        });
      }
    改为：
     function  clickable() { 
        $("#result").html('<img src="loading.gif" />'); 
        $("#text").html('<img src="loading.gif" />'); 
        $.ajax({        
          url:'b.php',        
          type:'post',                 
          dataType:'html',            
          data:"value=" + $(this).text(),                 
          success:data     
        });
      }  <a id="send1" onClick='clickable1();'>apple</a>
      <a id="send2" onClick='clickable2();'>orange</a>
      <a id="send3" onClick='clickable3();'>aaa</a>
    改为：
       <a id="send1" onClick='clickable();'>apple</a>
      <a id="send2" onClick='clickable();'>orange</a>
      <a id="send3" onClick='clickable();'>aaa</a>data1,2,3只用一个即可，统一用data
    function data (html) {
        var $html = $( html );       
        $html.filter('#aa').appendTo("#result");
        $html.filter('#bb').appendTo("#text");  
      }
      

  4.   

    不知道这样算够简化了吗？效果等同于楼主要的效果！赋注释！
    <html>
    <head>
    </head>
    <script src="jquery-1.4.4.min.js" type="text/javascript"></script> 
    <script type="text/javascript">
    $(function(){
    $('a').each(function(i,obj){//便历所有a标签，如果页面不只一个a，可以在某个ID层进行约束，如$(#id a)
       $(obj).click(function(){//把检索出来的每个a标签添加单击事件
         $.ajax({
      url:'bbb.php',
      type:'post',
      data:'value='+$(obj).text(),
      beforsend:function(){ $("#result").html('<img src="loading.gif"/>'); $("#text").html('<img src="loading.gif"/>'); },
      success:function(data){$('#result').html($(data).filter('#aa'));$('#text').html($(data).filter('#bb'));}
      });
        });
       });
      });
    </script> 
    <body> 
      <div id="result"></div>
      <div id="text"></div>
      <a id="send1">apple</a>
      <a id="send2">orange</a>
      <a id="send3">aaa</a>
    </body>
    </html>
      

  5.   

    url:'bbb.php',更正一下url后台地址，改为你自己的url:'b.php'你测试一下，是否可行！
      

  6.   

    falizixun2， 谢谢。数据传输已经成功。
      

  7.   

    不好意思，笔误！
    beforsend:改为:beforeSend才有效果！