javascript讀取XML數據，在頁面中展現、編輯、保存的實現_javascript技巧
來源：懂視網
責編：小采
時間：2020-11-27 20:45:05
javascript讀取XML數據，在頁面中展現、編輯、保存的實現_javascript技巧
javascript讀取XML數據，在頁面中展現、編輯、保存的實現_javascript技巧:首先考慮用什么方法做，考慮到三個方式：1、C#拼HTML構造table，修改和保存通過Ajax實現。2、XML+XSL，展現和修改用兩個XSL文件來做，Ajax修改、保存XML。3、GridView控件。 經過細致考慮，首先第三方案GridView控件滿足不了需求，因為XML格式多樣，可
導讀javascript讀取XML數據，在頁面中展現、編輯、保存的實現_javascript技巧:首先考慮用什么方法做，考慮到三個方式：1、C#拼HTML構造table，修改和保存通過Ajax實現。2、XML+XSL，展現和修改用兩個XSL文件來做，Ajax修改、保存XML。3、GridView控件。 經過細致考慮，首先第三方案GridView控件滿足不了需求，因為XML格式多樣，可
首先考慮用什么方法做，考慮到三個方式：1、C#拼HTML構造table，修改和保存通過Ajax實現。2、XML+XSL，展現和修改用兩個XSL文件來做，Ajax修改、保存XML。3、GridView控件。
經過細致考慮，首先第三方案GridView控件滿足不了需求，因為XML格式多樣，可能涉及到很多的行、列合并和行、列表頭合并。第一方案太麻煩，坐起來是細致活和體力活，需求變動后不好修改。所以選擇第二方案。開始學習XPath、XSLT。AJAX用js異步調用一般處理文件(ashx)的方式。
1、實現選擇框（通過Ajax讀取數據庫，綁定數據）的綁定時出現錯誤，最終發現是在讀取XML時使用了異步方式與Ajax有沖突，用同步就可以解決了。
2、保存XML。修改后的數據怎么保存到XML了？通過Javascript保存，js不能保存，如果用js保存必須用hta；用AJax保存，怎么能讓修改后的XML傳到AJAX方法里去，瞎琢磨，試了幾種方法，還真讓我試出來了，源碼
js：
代碼如下:
var $=function (id){return document.getElementById(id);}
var xmlHttp;
var curControl;
var curValue;
function ToEdit(){
var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load("myxml.xml");
var xsl = new ActiveXObject("Microsoft.XMLDOM");
xsl.async = false;
xsl.load("myxsl_edit.xsl");
document.write(xml.transformNode(xsl));
document.close();
//綁定選擇框
LoadSelect();
}
//保存xml
function Save(){
var oDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");//負責得到響應結果
oDoc.async = false;
oDoc.resolveExternals = false;
oDoc.load("myxml.xml");
var data = oDoc.selectNodes("http://Data[@IsEdit='1']");//讀取所有請求大類所屬小類的類名
for(var i=0; i < data.length; i++)
{
var nodeEdit;
var nodeID;
var nodeType;
for(var j=0; j
{
if(data[i].attributes[j].nodeName=="IsEdit")
{
nodeEdit = data[i].attributes[j].nodeValue;
}
else if(data[i].attributes[j].nodeName=="id")
{
nodeID = data[i].attributes[j].nodeValue;
}
else if(data[i].attributes[j].nodeName=="Type")
{
nodeType = data[i].attributes[j].nodeValue;
}
}
if(nodeType=="Combox")
{
var combox = $(nodeID);
if(combox!=null)
{
if(combox.options.length>0)
data[i].text = combox.options[combox.selectedIndex].value;
}
}
else
{
data[i].text = $(nodeID).value;
}
}
var strXML = oDoc.xml;
var url="saveXML.ashx";
StartRequest(url,null,AfterEdit,strXML,"POST");
}
function AfterEdit()
{
//可以不用下面兩個if語句，沒有用異步方式
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var rtn = xmlHttp.responseText;
if(rtn=="true")
{
alert("保存成功！");
}
else
{
alert("保存失敗！");
}
Show();
}
}
}
function Show()
{
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load("myxml.xml");
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM");
xsl.async = false;
xsl.load("myxsl.xsl");
document.write(xml.transformNode(xsl));
document.close();
}
///////////////////綁定下選擇框////////////////////////
function LoadSelect()
{
var allcontrols = document.all;
for(var j=0;j{
if(allcontrols[j].tagName=="SELECT")
{
var datainfo = allcontrols[j].flex;
//datainfo:tablename^value^name^selectedvalue
var datainfo_sp = datainfo.split(');
if(datainfo_sp.length>2)
{
var selectID = datainfo_sp[0];
var selectedValue = datainfo_sp[2];
var datainfo_sp_sp = datainfo_sp[1].split('^');
var table = datainfo_sp_sp[0];
var value = datainfo_sp_sp[1];
var text = datainfo_sp_sp[2];
var control = $(selectID);
var param = "table=" + table + "&value=" + value + "&text=" + text;
curControl = control;
curValue = selectedValue;
var callback = BindSelect;
StartRequest("getDataSet.ashx", param, BindSelect,null,"GET");
}
}
}
}
function BindSelect()
{
//可以不用下面兩個if語句，沒有用異步方式
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var control = curControl;
var selectedValue = curValue;
var data = xmlHttp.responseText;
if(data != null || data !="")
{
control.add(new Option("",""));
var data_sp = data.split(');
for(var i=0; i{
var data_sp_sp = data_sp[i].split('^');
if(data_sp_sp.length>1)
control.add(new Option(data_sp_sp[1], data_sp_sp[0]));
}
for(var i =0;i{
if(control.options[i].value == selectedValue)
{
control.selectedIndex = i;
break;
}
}
}
}
}
}
///////////////////綁定下選擇框////////////////////////
///////////////////實現Ajax///////////////////////////
function StartRequest(url,param,callback,sendString,type)
{
if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();//mozilla瀏覽器
}
else if(window.ActiveXObject)
{
try
{
xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");//ＩＥ舊版本
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//ＩＥ新版本
}
catch(e)
{
}
}
if(!xmlHttp)
{
window.alert("不能創建XMLHTTPREQUEST對象!");
return false;
}
}
var strURL = url + (param != "" && param!=null ? "?" + param : "");
sendString = "param=" + sendString;
xmlHttp.open(type,strURL,false);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xmlHttp.onreadystatechange=callback;
xmlHttp.send(sendString);
}
xml
統計
|
類別
|
系數
|
分析
|
比例1
|
比例2
|
比例3
|
比例4
|
比例5
|
比例6
|
比例7
|
紅
|
1
|
01
|
5.0
|
2009-10-05
|
21111
|
21
|
21
|
21
|
2
|
2
|
3
|
4
|
4
|
2
|
2
|
2
|
3
|
1
|
2
|
4
|
4
|
2
|
1
|
1
|
小計：
|
綠
|
4
|
4
|
4
|
4
|
4
|
2
|
4
|
4
|
5
|
4
|
4
|
4
|
4
|
2
|
4
|
4
|
6
|
3
|
4
|
4
|
4
|
2
|
3
|
3
|
7
|
4
|
4
|
4
|
4
|
4
|
4
|
4
|
8
|
4
|
4
|
4
|
4
|
3
|
4
|
4
|
9
|
4
|
4
|
4
|
4
|
1
|
5.0
|
2009-10-14
|
小計：
|
藍
|
10
|
4
|
4
|
4
|
4
|
1
|
5.0
|
2009-10-14
|
11
|
4
|
4
|
4
|
4
|
1
|
5.0
|
2009-10-14
|
12
|
4
|
4
|
4
|
4
|
1
|
5.0
|
2009-10-14
|
小計：
|
顯示頁的xsl
代碼如下:
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
javascript讀取XML數據，在頁面中展現、編輯、保存的實現_javascript技巧
javascript讀取XML數據，在頁面中展現、編輯、保存的實現_javascript技巧:首先考慮用什么方法做，考慮到三個方式：1、C#拼HTML構造table，修改和保存通過Ajax實現。2、XML+XSL，展現和修改用兩個XSL文件來做，Ajax修改、保存XML。3、GridView控件。 經過細致考慮，首先第三方案GridView控件滿足不了需求，因為XML格式多樣，可
