且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

局部刷新的实现

更新时间:2022-08-19 21:08:32

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


本文转自linzheng 51CTO博客,原文链接:http://blog.51cto.com/linzheng/1081595