使用AJAX或jQuery请求其他jsp

使用AJAX局部刷新页面

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>sample09.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">
	function loadXMLDoc(name)
	{
		var xmlhttp;
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		if(name=='ylBtn'){
			xmlhttp.open("POST","./yule.jsp",false);
			xmlhttp.send();
		}else if(name=='cjBtn'){
			xmlhttp.open("POST","./caijing.jsp",false);
			xmlhttp.send();
		}
		document.getElementById("news").innerHTML=xmlhttp.responseText;
	}
</script>
  </head>
  
  <body>
    <h1>新闻列表</h1> <br>
    <input type="button" id="ylBtn" value="娱乐新闻" οnclick="javascript:loadXMLDoc('ylBtn');"/>
    <input type="button" id="cjBtn" value="财经新闻" οnclick="javascript:loadXMLDoc('cjBtn');"/>
    <div  style="float: left">
    <table>
    <tr>
    	<td>快中秋节了,祝大家中秋快乐!</td>
    	<td>2011-9-8</td>
    </tr>
    <tr>
    	<td>快中秋节了,祝大家中秋快乐!</td>
    	<td>2011-9-8</td>
    </tr>
    <tr>
    	<td>快中秋节了,祝大家中秋快乐!</td>
    	<td>2011-9-8</td>
    </tr>
    <tr>
    	<td>快中秋节了,祝大家中秋快乐!</td>
    	<td>2011-9-8</td>
    </tr>
    </table>
   </div>
    <div id="news"></div>
  </body>
</html>
 

 

 

使用jQuery局部刷新页面

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>sample09.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#ylBtn").click(function(){
			$("#news").load("yule.jsp");
		});
		$("#cjBtn").click(function(){
			$("#news").load("caijing.jsp");
		});
	})
</script>
  </head>
  
  <body>
    <h1>新闻列表</h1> <br>
    <input type="button" id="ylBtn" value="娱乐新闻">
    <input type="button" id="cjBtn" value="财经新闻">
    <div  style="float: left">
    <table>
    <tr>
    	<td>快中秋节了,祝大家中秋快乐!</td>
    	<td>2011-9-8</td>
    </tr>
    <tr>
    	<td>快中秋节了,祝大家中秋快乐!</td>
    	<td>2011-9-8</td>
    </tr>
    <tr>
    	<td>快中秋节了,祝大家中秋快乐!</td>
    	<td>2011-9-8</td>
    </tr>
    <tr>
    	<td>快中秋节了,祝大家中秋快乐!</td>
    	<td>2011-9-8</td>
    </tr>
    </table>
   </div>
    <div id="news"></div>
  </body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值