jQuery局部刷新的实现

来源:互联网 发布:淘宝中国一号白银店铺 编辑:程序博客网 时间:2024/06/10 00:22
一、在一个页面上通过ajax加载其他的页面来实现异步的效果
原理
ajax(url,param,success);   
function success(msg){   
 $("#某个div").html(msg);   
}  
 
 searcher.aspx   

  <script type="text/javascript">  
        function sub(){   
            var params=$("#receiptForm").serialize();   
            $.ajax({   
                type:"POST",   
                url:"list.aspx",   
                data:encodeURI(params),   
                dataType:"html",   //返回页面的html源码
                success:function(data){    
                    $('div').html(data);   
                },   

                error:function(){    
                }   
            });   
        }   
    </script>  
  </head>  
  <body>  
    <form id="receiptForm"  >  
       产品名称:<input type="text"  name="name"/><br/>  
        产品型号:<input type="text" name="no"/><br/>  
        <input type="submit" name="search"/>  
    </form>  
    <div id="list"></div>  
 </body>  
</html>  


list.aspx    根据传递的参数来获取产品信息展现出一个列表的形式的局部html代码,不是一个完整的页面
<table   >  
      <tr>   
          <th>1</th>   
           <th>2</th>   
            <th>3</th>   
            <th>4</th>   
            <th>5</th>   
            <th>6</th>   
            <th>7</th>   
            <th>8</th>   
            <th>9</th>   
            <th>10</th>                
        </tr> 
 <asp:Repeater>
……
 </asp:Repeater>
</table >
原创粉丝点击