局部刷新的实现

一、在一个页面上通过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 >  

     

     

     

    posted on 2010-10-23 12:56  linzheng  阅读(736)  评论(1编辑  收藏  举报

    导航