发帖 回复
返回列表
  • 10403阅读
  • 2回复

【原创】一个XML+XSLT+Javascript+XMLHttpRequest的例子 [复制链接]

 上一主题 下一主题
离线XChinux
总版主
 
只看楼主 倒序阅读 楼主  发表于: 2006-01-16
好辛苦哇，写这个东西写了两天了，好费劲。
服务器端动态输出的是XML，然后配合写好的XSL来进行显示，在里面，有添加厂商资料和商品资料的功能，采用Javascript+XMLHttpRequest(Ajax)的方式向服务器端进行请求，返回结果后用Javascript动态地修改界面显示。
p4_2.xsl

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (C) 2005 by Bai Jianping<XChinux@163.com> -->
<!-- p4_2.xsl -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" omit-xml-declaration="yes" />
<xsl:include href="include.xsl"/>
<xsl:template match="/">
<xsl:call-template name="html">
<xsl:with-param name="headtitle" select="/html/head/title"/>
<xsl:with-param name="contentroot" select="/html/body" />
</xsl:call-template>
</xsl:template>
<xsl:template name="content">
<xsl:param name="body"/>
<table width="98%" align="center" cellspacing="1" cellpadding="3" class="i_table">
<tr><td class="head" colspan="2"><b>提示信息</b></td></tr>
<tr><td class="b"><br/>
<ul>
1. 如果会员中已经有了用户填的YAHOO帐号，则可使用<font color="#FF0000">自动载入基本资料</font>功能来加载已存在的用户资料<br/>
2. 如果此YAHOO帐号已经有会员使用过，则可使用<font color="#FF0000">是否并单</font>功能来合并订单
</ul>
<br/></td></tr>
</table>
<br/>
<script language="JavaScript" src="js/ajax.js"></script>
<form name="form" action="{$body/form/action}" method="post" onsubmit="return onFormSubmit()">
<script language="javascript">
<![CDATA[
function onFormSubmit()
{
    return true;
}
function getMnameMid(elemid, mnovalue)
{
    if (mnovalue.length < 1)
    {
        alert("厂商编号不能为空");
        return false;
    }
    ajax(elemid, "厂商编号不存在", "p5_0.php?action=mnamemid&mno=" + mnovalue);
}
function delRecord(rowIndex)
{
    document.getElementById("checkdetail").deleteRow(rowIndex);
}
function doJob()
{
    if (document.form.selectOption.options[document.form.selectOption.selectedIndex].value == 0)
    {
        if (document.getElementById("gsno").value.length < 1)
        {
              alert("商品编号不能为空");
              document.getElementById("gsno").focus();
              return;
        }
       
        var iCount = document.getElementById("checkdetail").rows.length;
        for (var i = 1; i < iCount; i++)
        {
              if (document.getElementById("gsno").value.toLowerCase() === document.getElementById("checkdetail").rows[i ].cells[0].innerHTML.toLowerCase())
              {
                  alert("此商品编号已经存在");
                  document.getElementById("gsno").focus();
                  return;
              }
        }
       
        if ((document.getElementById("gsnum").value > 0) == false)
        {
              alert("商品数量必须大于零");
              document.getElementById("gsnum").focus();
              return;
        }
       
        if (document.getElementById("gsprice").value.length > 0 && (document.getElementById("gsprice").value >= 0) == false)
        {
              alert("商品价格必须大于等于零");
              document.getElementById("gsprice").focus();
              return;
        }
        ajax2("checkdetail", "商品编号不存在", "p5_0.php?action=addgoods&gsno=" + document.getElementById("gsno").value + "&gsnum=" + document.getElementById("gsnum").value + "&gsprice=" + document.getElementById("gsprice").value);
        document.getElementById("gsno").value = "";
        document.getElementById("gsnum").value = "";
        document.getElementById("gsprice").value = "";
    }
    else
    {
        if (document.getElementById("gsno").value.length < 1)
        {
              alert("商品编号不能为空");
              document.getElementById("gsno").focus();
              return;
        }
        if ((document.getElementById("gsnum").value > 0) == false)
        {
              alert("商品数量必须大于零");
              document.getElementById("gsnum").focus();
              return;
        }
        if ((document.getElementById("gsprice").value > 0) == false)
        {
              alert("商品价格必须大于零");
              document.getElementById("gsprice").focus();
              return;
        }
        var gsnum = parseInt(document.getElementById("gsnum").value);
        var gsprice = parseFloat(document.getElementById("gsprice").value);
        var trid = document.getElementById("edittrid").value;
        document.getElementById("gsnum").value = gsnum;
        document.getElementById("gsprice").value = gsprice;
        document.getElementById("trgsnum[" + trid + "]").value = gsnum;
        document.getElementById("trgsprice[" + trid + "]").value = gsprice;
        document.getElementById("trtdgsnum[" + trid + "]").innerHTML = gsnum;
        document.getElementById("trtdgsprice[" + trid + "]").innerHTML = gsprice;
        document.getElementById("trtdtotal[" + trid + "]").innerHTML = gsnum*gsprice;
       
        calcTotal();
    }
}
function calcTotal()
{
    if (parseFloat(document.getElementById("checkTax").value) != document.getElementById("checkTax").value)
    {
        alert("税金必须是数字");
        document.getElementById("checkTax").value = "0";
        document.getElementById("checkTax").focus();
        return false;
    }
   
    var iCount = document.getElementById("checkdetail").rows.length;
    var total = 0;
    for (var i = 1; i < iCount; i++)
    {
        total += parseFloat(document.getElementById("checkdetail").rows[ i].cells[6].innerHTML)
    }
    document.getElementById("checkTotal").value = total;
    document.getElementById("checkPrice").value = total + parseFloat(document.getElementById("checkTax").value);
}
function delRecord(trid)
{
    document.getElementById("checkdetail").deleteRow(document.getElementById(trid).rowIndex);
    calcTotal();
}
function editRecord(trid)
{
    document.getElementById("gsno").readOnly = true;
    document.form.selectOption.selectedIndex = 1;
    document.getElementById("edittrid").value = trid;
    document.getElementById("gsid").value = document.getElementById("trgsid[" + trid + "]").value;
    document.getElementById("gsno").value = document.getElementById("trtdgsno[" + trid + "]").innerHTML;
    document.getElementById("gsnum").value = document.getElementById("trgsnum[" + trid + "]").value;
    document.getElementById("gsprice").value = document.getElementById("trgsprice[" + trid + "]").value;
}
function selectChange(cid)
{
    if (cid == 0)
    {
        document.getElementById("gsno").readOnly = false;
        document.getElementById("gsno").value = "";
        document.getElementById("gsnum").value = "";
        document.getElementById("gsprice").value = "";
    }
    else
    {
        document.getElementById("gsno").readOnly = true;
    }
}
]]>
</script>
<table width="98%" align="center" cellspacing="0" cellpadding="0" class="i_table">
<tr><td>
<table width="100%" cellspacing="1" cellpadding="3">
<tbody>
<tr><td class="head" colspan="3"><b><xsl:value-of select="$body/form/caption"/></b></td></tr>
<tr><td class="head_2" rowspan="2" width="3%" align="center">进<br/>货<br/>商</td>
<td class="b" width="7%">厂商编号</td>
<td class="b" width="90%"><input type="text" name="mno" id="mno" maxlength="31" value=""/> <input type="button" value="载入厂商资料" onclick="getMnameMid('mnamemid', document.form.mno.value)"/><font color="#FF0000">請輸入廠商編號載入資料</font></td></tr>
<tr><td class="b">厂商名称</td>
<td class="b" id="mnamemid"><input type="hidden" name="mid" id="mid" value=""/><input type="text" readonly="readonly" name="mname" id="mname" maxlength="63" value="" style="width:80%;background-color:#F7F7F7"/></td></tr>
<tr><td class="head_2" rowspan="5" align="center">进<br/>货<br/>资<br/>料</td>
<td class="b" rowspan="2">细项输入</td>
<td class="b">
<select name="selectOption" onchange="selectChange(this.options[this.selectedIndex].value)">
<option value="0">新增</option>
<option value="1">修改</option>
</select>
<input type="hidden" name="gsid" id="gsid" value=""/>
<input type="hidden" name="edittrid" id="edittrid" value=""/>
商品编号: <input type="text" name="gsno" id="gsno" value=""/> 数量: <input style="width:80px" type="text" name="gsnum" id="gsnum" value="" /> 进价: <input style="width:80px" type="text" name="gsprice" id="gsprice" value="" /> <input type="button" value="执行作业" onclick="doJob()"/>
</td></tr>
<tr>
<td class="b">
<table width="98%" align="center" cellspacing="0" cellpadding="0" class="i_table">
<tr><td>
<table width="100%" cellspacing="1" cellpadding="3">
<tbody id="checkdetail">
<tr class="head_2" align="center">
<td width="10%">商品编号</td>
<td width="15%">商品名称</td>
<td width="5%">颜色</td>
<td width="5%">尺寸</td>
<td width="5%">数量</td>
<td width="10%">进价</td>
<td width="10%">小计</td>
<td colspan="2" width="8%">操作</td>
</tr>
</tbody>
</table>
</td></tr>
</table>
</td>
</tr>
<tr>
<td class="b">进货明细</td>
<td class="b">进货单号: <input type="text" /> 进货日期: <input type="text"/> 经手人: <input type="text"/></td>
</tr>
<tr>
<td class="b">进货金额</td>
<td class="b">小计: <input type="text" name="checkTotal" id="checkTotal" value="0" readonly="readonly" style="background-color:#F7F7F7"/> /税金: <input type="text" name="checkTax" id="checkTax" value="0"/> /总计: <input type="text" name="checkPrice" id="checkPrice" value="0" readonly="readonly" style="background-color:#F7F7F7"/><input type="button" value="计算" onclick="calcTotal()"/></td>
</tr>
<tr>
<td class="b">进货备注</td>
<td class="b">
<textarea maxlength="255" rows="5" cols="80%" id="cmemo" name="cmemo"></textarea>
</td>
</tr>
</tbody>
</table></td></tr></table>
<br/><center><input type="button" value="提 交" onclick=""/></center>
</form>
</xsl:template>
</xsl:stylesheet>


include.xsl

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (C) 2005 by Bai Jianping<XChinux@163.com> -->
<!-- include.xsl -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" omit-xml-declaration="yes" />

<xsl:template name="html">
<xsl:param name="headtitle"/>
<xsl:param name="contentroot" />
<html xmlns="http://www.w3.org/1999/xhtml">

<xsl:call-template name="head">
<xsl:with-param name="title" select="$headtitle"/>
</xsl:call-template>

<body topmargin="5" leftmargin="5">
<xsl:call-template name="header" />
<xsl:call-template name="content">
<xsl:with-param name="body" select="$contentroot"/>
</xsl:call-template>
<xsl:call-template name="footer"/>
</body>
</html>
</xsl:template>

<xsl:template name="head">
<xsl:param name="title"/>
<head>
<title>
<xsl:value-of select="$title" />
</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
</xsl:template>

<xsl:template name="header">
<table width="99%" align="center" cellpadding="1" cellspacing="0" border="0">
<tr>
    <td>
        <table width="100%" border="0" cellspacing="2" cellpadding="4">
        <tr class="head">
              <td width="30%" align="center">
              <a href="http://www.chinuxteam.com" target="_blank">
              <b>ChinuxTeam.Com</b>
              </a>
              </td>
              <td width="30%" align="center">
              <a href="http://www.qtcn.org" target="_blank">
              <b>Qt中文论坛</b>
              </a>
              </td>
              <td width="30%" align="center">
              <a href="http://www.365huo.com" target="_blank">
              <b>天天接活网</b>
              </a>
              </td>
        </tr>
        </table>
    </td>
</tr>
</table><br/>
</xsl:template>

<xsl:template name="footer">
<center>
<blockquote><br/><br/><hr class="hr" size="1"/>
Copyright © 2005, by <a href="http://www.chinuxteam.com" target="_blank">ChinuxTeam.Com</a>, All right reserved.
</blockquote><br/>
</center>
</xsl:template>
</xsl:stylesheet>


ajax.js

function InitXMLHttp()
{
    var xmlhttp = null;
    try
    {
        if (window.XMLHttpRequest)
        {
              xmlhttp = new XMLHttpRequest();
        }
        else
        {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    catch (e)
    {
        alert("您的浏览器不支持XMLHTTP，请使用Mozilla系列浏览器或者下载IE XMLHTTP插件");
        return false;
    }
    return xmlhttp;
}

function ajax(objId, strError, serverPage)
{
    xmlhttp = InitXMLHttp();
    xmlhttp.open("GET", serverPage, true);

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
              var resText = xmlhttp.responseText;
              if (resText == "false")
              {
                  alert(strError);
              }
              else
              {
                  document.getElementById(objId).innerHTML = resText;
              }
        }
    }
    xmlhttp.send(null);
}

function ajax2(objId, strError, serverPage)
{
    xmlhttp = InitXMLHttp();
    xmlhttp.open("GET", serverPage, true);

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
              var resText = xmlhttp.responseText;
              if (resText == "false")
              {
                  alert(strError);
              }
              else
              {
                  document.getElementById(objId).innerHTML += resText;
                  calcTotal();
              }
        }
    }
    xmlhttp.send(null);
}


p5_0.php本身是主要输出XML文件的，其中有两个JavaScript的XMLHttpRequest请求的回应，输出的是xsl的
php5_0.php默认输出


include_once("header.php");
?>
<html>
<head>
<title><?=$OMS_MENU[$menuid[0]]?> -- <?=$OMS_MENUITEM[$menuid[0]][$menuid[1]]?> -- powered by ChinuxTeam</title>
</head>
<body>
<form>
<action>
<![CDATA[
<?=$checkin['action']?>
]]>
</action>
<caption><?=$checkin['caption']?></caption>
<mid><?=$checkin['mid']?></mid>
<mno><?=$checkin['mno']?></mno>
<mname><?=$checkin['mname']?></mname>
</form>
</body>
</html>


p5_0.php中申请厂商资料时的回应：

header("Content-Type: text/html; charset=UTF-8");
              $response = <<<EOT
<input type="hidden" name="mid" id="mid" value="{$rs['mid']}" />
<input type="text" readonly="readonly" name="mname" id="mname" maxlength="63" value="{$rs['mname']}" style="width:80%;background-color:#F7F7F7"/>
EOT;


p5_0.php中申请商品资料时的回应：

              header("Content-Type: text/html; charset=UTF-8");
              $trid = time();
              $response = <<<EOT
<tr align="center" id="trid[{$trid}]">
<input type="hidden" name="trgsid[{$trid}]" id="trgsid[{$trid}]" value="{$rs['gsid']}"/>
<input type="hidden" name="trgsnum[{$trid}]" id="trgsnum[{$trid}]" value="{$rs['gsnum']}"/>
<input type="hidden" name="trgsprice[{$trid}]" id="trgsprice[{$trid}]" value="{$rs['gsbuyprice']}"/>
<td class="b" id="trtdgsno[{$trid}]">{$rs['gsno']}</td>
<td class="b" id="trtdgsname[{$trid}]">{$rs['gsname']}</td>
<td class="b" id="trtdscolor[{$trid}]">{$rs['gscolor']}</td>
<td class="b" id="trtdgssize[{$trid}]">{$rs['gssize']}</td>
<td class="b" id="trtdgsnum[{$trid}]">{$rs['gsnum']}</td>
<td class="b" id="trtdgsprice[{$trid}]">{$rs['gsbuyprice']}</td>
<td class="b" id="trtdtotal[{$trid}]">{$rs['total']}</td>
<td class="b" width="4%"><a href="javascript:editRecord('{$trid}')">编辑</a></td>
<td class="b" width="4%"><a href="javascript:delRecord('trid[{$trid}]')">删除</a></td>
</tr>
EOT;
[ 此贴被XChinux在2006-01-16 16:25重新编辑 ]
二笔 openSUSE Vim N9 BB10 XChinux@163.com 网易博客 腾讯微博
承接C++/Qt、Qt UI界面、PHP及预算报销系统开发业务
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线foxgod
骑士
只看该作者 1楼 发表于: 2011-09-23
回 楼主(XChinux) 的帖子
我想问下，我看别人使用QNetworkAccessManager 面的GET（url），就可以获得类似XML的东西，为什么我得到的是哥网页呢，还有在get（url）另外的网址的时候，别的东西不太对，对方说，你在HTTP请求的时候要加cookies，请问怎加呀，什么意思
回复
举报
离线XChinux
总版主
只看该作者 2楼 发表于: 2011-09-26
源数据是什么你获得到的就是什么吧．
看QNetworkAccessManager类的方法
setCookieJar()
二笔 openSUSE Vim N9 BB10 XChinux@163.com 网易博客 腾讯微博
承接C++/Qt、Qt UI界面、PHP及预算报销系统开发业务
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个