xslt中使用js（ajax）例子

最新推荐文章于 2020-06-21 11:52:22 发布

weixin_30855099

最新推荐文章于 2020-06-21 11:52:22 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhihui516/archive/2008/10/12/1308874.html

本文介绍了一种使用XSLT进行XML文档转换的方法，并展示了如何通过XSLT定义HTML样式来展示产品信息，包括图片加载、规格显示及价格等元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:user="anything here" >

<xsl:template match="/">
     <html>
       <head>
          <style type="text/css">
.blue{ background:#8c93bf; font:Arial, Helvetica, sans-serif; font-weight:bolder; font-size:20px; color:#eeeeee; text-align:center; vertical-align:middle; word-spacing:2.5px}
.space{ text-align:right; vertical-align:bottom;}
.descrip{ text-align: center; vertical-align:top; font-family:Haettenschweiler,Verdana, Arial, Helvetica, sans-serif; color:#000000; font-size:18px; letter-spacing:1.0px; }
.text1{ text-align:right; vertical-align:bottom; height:6px; color:#FF0000; font-size:20px; font:Arial, Helvetica, sans-serif; font-weight: bold}
.text2{ text-align:right; vertical-align:top; height:16px; color:#FF0000; font-size:50px; font:Arial, Helvetica, sans-serif; font-weight: bolder}
.text3{ text-align:right; height:6px; color:#FF0000; font-size:20px; font:Arial, Helvetica, sans-serif; font-weight: bold}
.itemnum{ width:160px; text-align:left; vertical-align:middle; font-family:Arial, Helvetica, sans-serif; color:#000000; font-size:15px; font-weight:bold}
.itemnum2{ text-align:center; vertical-align:middle; font-family:Arial, Helvetica, sans-serif; color:#000000; font-size:12px; }
.look{ text-align:center; vertical-align:top; color:#2A7FAA; font-size:40px; font-family:Haettenschweiler,Verdana, Arial, Helvetica, sans-serif; font-weight: bolder;width:100%;letter-spacing:1px}
.unigroup{color:#FFFFFF; font-size:24px; font-weight:bolder;}
.where{color: #99CCCC; font-size:15px; font-weight:bolder; letter-spacing:0.5px; vertical-align:top; }
.www{color:#FFFFFF; font-size:18px; font-weight:bolder; text-align: center}
.service{ color:#FF0000; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bolder}
.text{font-family:tahoma,sans-serif; font-size: 10px; line-height:14px;}
.price{color:#ff5124; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 20px; font-weight:bold}
.2004{ color: #2d3194; font-size:12px; font-family:Arial, Helvetica, sans-serif; letter-spacing:1.2px; word-spacing: 1.5px; line-height:20px;}
.divfeature{ width:240px}
          </style>

       </head>
       <body style="margin-top:0px;" onload="begin1();">
                              <script type="text/javascript" language="javascript">

                function createXMLHttpRequest() {
    if (window.XMLHttpRequest) {
       xmlHttp = new XMLHttpRequest();
    } else {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function begin1()
{
var template=document.getElementById("image_id").value;
createXMLHttpRequest();
xmlHttp.onreadystatechange = processor;
xmlHttp.open("POST","readImage.jsp","true");
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("imageid="+template);
}

function processor()
{

if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200){
  var father=document.getElementById("image");
var image=document.createElement("img");
image.src=xmlHttp.responseText;
father.appendChild(image);
}
}
}
          </script>
                          <xsl:for-each select="promotion/mode2/product">

                               <table cellpadding="0" cellspacing="0" border="0" width="160" height="500" bgcolor="#FF99FF">
                               <tr>
                                  <td bgcolor="#c6cddf" height="10" width="100%" colspan="2" align="left"></td>
                               </tr>
                               <tr>
                  <td align="left" valign="top" height="10" width="50%"><img src="images/1.jpg" width="10" height="10"/></td>
                  <td align="right" valign="top" height="10" width="50%"><img src="images/2.jpg" width="10" height="10"/></td>
                            </tr>

                                 <tr>
                                     <td class="descrip" height="50" width="160" colspan="2">
                                     <xsl:value-of select="@description" />
                                     </td>
                                 </tr>
                                 <tr>
                                    <td>
                                    <xsl:variable   name="pic"><xsl:value-of   select="@photo" /></xsl:variable>
                                      <input type="text" value="{$pic}" id="image_id"/>
                                    </td>
                                 </tr>
                                 <tr>

                                     <td align="center" height="165" width="100%" colspan="2" id="image">

                                     </td>
                                 </tr>
                                 <tr>
                                   <td width="100%" height="140" align="left">
                                           <div style="font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;margin-left:15px; height:20px">Specifications</div>
                                              <div style="margin-left:15px; width:120px; height:120px">
                                 <xsl:for-each select="feature">

                                    <li class="text">

                                   <xsl:value-of select="text()"/>

                                    </li>

                                 </xsl:for-each>
                               </div>
                                            </td>
                                 </tr>
                                 <tr>
                                     <td align="center" height="55" colspan="2">
                                      <div align="center" class="price" >
                                      <span>
                                    <span>$</span>
                                    <span style="font-size:30px" >
                                    <xsl:value-of select="floor(@price)"/>
                                    </span>
                                    <sup style="font-size:20px">
                                     <xsl:value-of select="substring-after(@price,'.')"/>
                                    </sup>
                                       </span>
                                        </div>

                                     </td>
                                   </tr>
                                 <tr>
                                     <td align="center" height="30" colspan="2">
                                     <div>
                        <span class="itemnum2">
                                           item:# <xsl:value-of select="@itemnumber"/>
                        </span>
                     </div>

                                     </td>
                                 </tr>
                                 <tr><td align="center" height="30"><img src="images/bottom-001.gif" alt=""/></td></tr>

                               <tr>
                  <td align="left" valign="top" height="10"><img src="images/3.jpg" width="10" height="10"/></td>
                  <td align="right" valign="top" height="10"><img src="images/4.jpg" width="10" height="10" /></td>
                            </tr>

                               </table>

                     </xsl:for-each>



           </body>
    </html>
</xsl:template>
</xsl:stylesheet>