JQuery 如何实现在同一个页面,通过点击不同的链接(action),显示不同的list

应该用到ajax,但是具体怎么实现呢?
我的想法是:通过点击不同的action,通过ajax获得不同的数据,传到当前页面来显示。
是不是点击不同的action,要新建不同的list头。
最新回答
撕答案比分手还悲痛

2024-09-17 09:14:34

main.jsp更改如下

<%@ page language="java" pageEncoding="UTF-8"%>

  <DIV class="ui-layout-north">

  </DIV>

  <DIV class="ui-layout-west">

   <dl id="sfqclick">

    <dt class="leftIco">

     省市

    </dt>

    <dd>

     <a href="1.jsp">查询省</a>

     <a href="#">查询市</a>

    </dd>

    <dt class="leftIco">

     第二部分

    </dt>

    <dd>

     <a href="#">SubLink-1</a>

     <a href="#">SubLink-2</a>

     <a href="#">SubLink-3</a>

    </dd>

    <dt class="leftIco">

     第三部分

    </dt>

    <dd>

     <a href="#">SubLink-1</a>

     <a href="#">SubLink-2</a>

     <a href="#">SubLink-3</a>

    </dd>

   </dl>

  </DIV>

1.jsp更改如下

<%@ page language="java"  pageEncoding="UTF-8"%>

<HTML>

 <HEAD>

  <TITLE>Layout Example</TITLE>

  <link rel="stylesheet" href="css/style.css" type="text/css" />

  <SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>

  <SCRIPT type="text/javascript" src="jquery.layout.js"></SCRIPT>

  <script type="text/javascript" src="jquery.tablesorter.js"></script>

  <SCRIPT type="text/javascript">

   $(document).ready(function () {

    $('body').layout({ applyDefaultStyles: true });

    //

    $("#sfqclick dt").click(function(){

     $(this).toggleClass("bottomIco")

         .next().slideToggle(1)

         .siblings("dd").slideUp("fast");

     $(this).siblings("dt").removeClass("bottomIco");

    });

   });

   // add parser through the tablesorter addParser method     

   $.tablesorter.addParser({         // set a unique id         

    id: 'grades',         

    is: function(s) {             // return false so this parser is not auto detected

    return false;},

    format: function(s) {             // format your data for normalization            

    return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0); },

   // set type, either numeric or text         

    type: 'numeric'     }); 

    $(function() {         

    $("table").tablesorter({            

    headers: {                 

    6: {                     

    sorter:'grades'  

    }            

    }        

   });   

   });

 

  $(document).ready(function(){

   $('dd a:first').click(function(){

    $.ajax({

     type: "POST",

        url: "findProvinceAll.action",

        dataType: "json",

        success: function(msg){

         alert( "Data Saved: " + msg );

        }

    });

   });

  });

</SCRIPT>

</HEAD>

<body>

<jsp:include page="main.jsp"></jsp:include>

<DIV class="ui-layout-center">

<table cellspacing="1" class="tablesorter">

 <thead> 

  <tr>     

   <th>省ID</th>     

   <th>省名称</th>     

  </tr> 

 </thead> 

 <tbody> 

  <tr>    

   <td id="prvoinceId"></td>   

   <td id="provinceName"></td>   

  </tr>

 </tbody> 

</table>

</DIV>

</BODY>

</HTML>

结果看图访问1.jsp

紫珺婳浅

2024-09-17 17:32:37

如果你想实现这样的功能的话,那么我建议用EXT JS,因为EXT js 里面这些框架都是已经存在的,拿过来嵌套就OK了,应用起来也比较方便!
我以前就是用EXT JS来做的像你说的这种页面,挺好的,我这里有一个官方API,你可以看一下:
http://w45438.s48.mydiscuz.com/docs/

链接就是API,有问题咱们可以讨论一下,相互提高
人潮拥挤我该远离

2024-09-17 21:42:19

像你这个,完全不必用ajax,因为你的显示区域都在右边一大块,用个iframe,照样做到局部刷新,但代价比ajax小多了