7-23 jsp頁面轉爲html頁面

1. <c:if    >-----<th:if    >

<c:if test="${sessionScope.UVO.guestName==null}">
	<meta http-equiv="REFRESH" content="0;url=initGuestLogin">
</c:if>

<span th:if="${sessionScope.UVO.guestName==null}">
	<meta http-equiv="REFRESH" content="0;url=initGuestLogin">
</span>

   2.  <form:form  >  <form:hidden   >----<form:    ><input: type="hidden"   >

<form:form modelAttribute="alipayForm" action="alipaySubmit" method="post">
	<form:hidden path="outTradeNo" value="${alipayForm.outTradeNo}"/>				<form:hidden path="subject" value="${alipayForm.subject}"/>					<form:hidden path="body" value="${alipayForm.body}"/>						<form:hidden path="price" value="${alipayForm.price}"/>
   <div class="about_wrapper">
         <h1>	該支付信息取自您登陸的我的信息，請確認，若是有問題請您修改您的我的信息。</h1>
   </div>
   <div class="about-top">										<div class="grid span_2_of_3">	  								  <h3>客戶訂單號：${alipayForm.outTradeNo}</h3>							  <p>訂單名稱：${alipayForm.subject}</p>								  <p>訂單描述：${alipayForm.body}</p>								  <p>付款金額：${alipayForm.price}</p>								  <div class="clear"></div>									</div>				
        <div class="clear"></div>
   </div>
   <input type="button" id="submitAlipay" class="button" value="登陸支付寶結帳" />
</form:form>

<form action="alipaySubmit" th:object="${alipayForm}" method="post">					<input type="hidden" name="outTradeNo" value=""	th:value="${alipayForm.outTradeNo}" /> 
        <input type="hidden" name="subject" value="" th:value="${alipayForm.subject}" /> 
        <input type="hidden" name="body" value="" th:value="${alipayForm.body}" />
        <input type="hidden" name="price" value="" th:value="${alipayForm.price}" /> 
    <div class="about_wrapper">										<h1>該支付信息取自您登陸的我的信息，請確認，若是有問題請您修改您的我的信息。</h1>
    </div>
    <div class="about-top">
      <div class="grid span_2_of_3">
        <h3> 客戶訂單號：<span th:text="${alipayForm.outTradeNo}"></span>	</h3>
        <p> 訂單名稱：<span th:text="${alipayForm.subject}"></span></p>
        <p> 訂單描述：<span th:text="${alipayForm.body}"></span></p>
        <p> 付款金額：<span th:text="${alipayForm.price}"></span></p>
      </div>
      <div class="clear"></div>
    </div>
   <div class="clear"></div>
   <input type="button" id="submitAlipay" class="button" value="登陸支付寶結帳" />
</form>

    3.   <jsp:include    >----<div: th: replace   >

<div class="header-para">
	<jsp:include page="/WEB-INF/jsp/shop/rightBar.jsp"></jsp:include>
</div>

<div class="header-para">
	<div th:replace="shop/rightBar :: page-right-bar"></div>
</div>

   4.   <c:choose    > <c:when   >----<th:if    >

<c:choose>
  <c:when test="${sessionScope.UVO.guestName==null}">
    <li class="act first"><a href="initGuestRegister">
      <div class="button-t"><span>註冊新用戶</span></div></a>
    </li>
    <li class="last"><a href="initGuestLogin">
       <div class="button-t"><span>登陸</span></div></a>
    </li>
  </c:when>
  <c:otherwise>
    <li class="act first"><a href="initEditGuest">
      <div class="button-t"> <span>${sessionScope.UVO.guestName}</span></div></a>
    </li>
    <li class="last">
       <a href="${pageContext.request.contextPath}/">
           <div class="button-t"><span>退出</span></div>
       </a>
     </li>
  </c:otherwise>
</c:choose>

<ul class="user_menu" th:fragment="page-user-bar">
   <li class="act first" th:if="${#strings.isEmpty(session.UVO.guestName)}">
      <a th:href="@{initGuestRegister}"><span class="button-t" >註冊新用戶</span></a>
   </li>
   <li class="last" th:if="${#strings.isEmpty(session.UVO.guestName)}">
	<a th:href="@{initGuestLogin}"><span class="button-t">登陸</span></a>
   </li>
   <li class="act first" th:if="${not #strings.isEmpty(session.UVO.guestName)}">
       <a th:href="@{initEditGuest}"><span class="button-t" th:text="${session.UVO.guestName}">張三
       </span></a>
    </li>
    <li class="last" th:if="${not #strings.isEmpty(session.UVO.guestName)}">
	<a th:href="@{/}"><span class="button-t">退出</span></a>
    </li>
</ul >

  5.  下面的這些標籤內容不變--<link:   ><meta:   ><script    >

<link href="shop/css/style.css" rel="stylesheet" type="text/css"
	media="all" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="shop/js/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#submitAlipay").click(function() {
			alipayForm.target = "newWindow";
			var win = window.open("about:blank", "newWindow");
			win.focus();
			alipayForm.submit();
			window.location.href = "initGoods?type=liangshi";
		});
	});
</script>

 6. 上面的代碼爲JQuery，<script>標籤爲腳本語言，分爲普通腳本語言與JQuery，若含有「$」和「#」符號就可歸爲JQuery，document包含<html > </html>中的全部標籤，window爲一個窗口，

$(document).ready(function() ------表示開始一個新的功能

$("#submitAlipay").click(function() -------"#submitAlipay"中的click事件發生時或觸發功能

alipayForm.target = "newWindow";  -------跳到一個新的窗口

var win = window.open("about:blank", "newWindow"); -----建立一個新的空白窗口"newWindow"

win.focus(); -----聚焦新的窗口

alipayForm.submit();-----提交alipayForm的表單信息

window.location.href = "initGoods?type=liangshi"; -------跳轉到initGoods，刷新首頁