適用於 說多頁共用一個說明文件。
進階用法:將說明文件使用request.getParameter("") 進行判別 ,在相同一頁回傳不同字串數值

必要匯入檔案
Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

主頁面

<script language="javascript">
  $(document).ready(function(){
     // $('div.more').hide();
      $('a.more-options').click(function() {
         if ($('div.more').is(':hidden'))
            $('div.more').slideDown('slow');
         else
            $('div.more').slideUp('slow');   
         return false;
      });   
      /*[重要]導入Ajax**/
      getExplain();
   })
//讀取Explain
    function getExplain(){      
        var result = jQuery.ajax({
           url: "explain.jsp",//傳送數值之頁面
           type:"POST", 
           async: false,
           dataType:'text',//接收的資料型態
           data:{},//進階用法可以設定傳輸的資料名稱 EX: type:"yes";
           success: function(htmlVal){
               $('div.more').append(htmlVal);
               }
           }).responseText;
      }
</script>
<a  class="more-options">使用說明</a>  
<div class=more>

抓取資料頁面 (explain.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
<table width="50%"  style='border-collapse: collapse;font-size: 1em;' borderColor="#cccccc" cellSpacing=5 cellPadding=4  border=1>
 <tr align=left >
    <td>
    <b>注意事項:</b>
    <BR>1.這裡輸入您的內容!!
    </td>
  </tr>
</table>

arrow
arrow
    文章標籤
    Jquery JSP Ajax
    全站熱搜

    penguin1989930 發表在 痞客邦 留言(0) 人氣()