在HTML页面中显示XML内容以创建表单元素

时间:2012-10-20 20:43:15

标签: javascript jquery html xml

我有应用程序,其中存在复选框树。我想在检查其中一些复选框之前预先填充复选框的if用户。

为了从我的后端perl脚本获取XML格式,如下所示。在下面的XML中只有0,43,44,45,46和50来,所以只有那些相应的复选框需要在页面加载时检查。我希望通过从黑化解析XMl调用perl脚本来显示页面加载时检查的复选框。我该怎么办?

<perldata> 
 <hashref memory_address="0x86f4880"> 
  <item key="0">1</item> 
 </hashref> 
</perldata> 
<perldata> 
 <hashref memory_address="0x86f4880"> 
  <item key="43">1</item> 
 </hashref> 
</perldata> 
<perldata> 
 <hashref memory_address="0x86f4880"> 
  <item key="44">1</item> 
 </hashref> 
</perldata> 
<perldata> 
 <hashref memory_address="0x86f4880"> 
  <item key="45">1</item> 
 </hashref> 
</perldata> 
<perldata> 
 <hashref memory_address="0x86f4880"> 
  <item key="46">1</item> 
 </hashref> 
</perldata> 
<perldata> 
 <hashref memory_address="0x86f4880"> 
  <item key="50">1</item> 
 </hashref> 
</perldata> 

2 个答案:

答案 0 :(得分:1)

这是一个演示,它为xml发出ajax请求,并将项密钥解析为ID为复选框

Woring Demo: http://jsfiddle.net/592At/1/

$.get(pathToXmlFile, function(response) {

    $(response).find('perldata').each(function(i) {
        var itemKey = $(this).find('item').attr('key');
        $('#'+itemKey).prop('checked',true)        
    });

})

答案 1 :(得分:1)

我读了一个平面XML文件,你可以从你的PERL程序中读取。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript">
    $(helloWorld)
    function helloWorld() {
        $.ajax({
            url: 'perldata.xml',
            success: function(data) {
                $('[key]',data).each(function(){
                    $('#chk_'+$(this).attr('key')).prop('checked',true)
                })
            }
        })
    }
    </script>
    <title>perlData</title>
</head>
<body>
<div id="message">
<form>
<input id='chk_0' type='checkbox' />0<br />
<input id='chk_1' type='checkbox' />1<br />
<input id='chk_2' type='checkbox' />2<br />
<input id='chk_3' type='checkbox' />3<br />
<input id='chk_4' type='checkbox' />4<br />
<input id='chk_5' type='checkbox' />5<br />
<input id='chk_6' type='checkbox' />6<br />
<input id='chk_7' type='checkbox' />7<br />
<input id='chk_8' type='checkbox' />8<br />
<input id='chk_9' type='checkbox' />9<br />
<input id='chk_10' type='checkbox' />10<br />
<input id='chk_11' type='checkbox' />11<br />
<input id='chk_12' type='checkbox' />12<br />
<input id='chk_13' type='checkbox' />13<br />
<input id='chk_14' type='checkbox' />14<br />
<input id='chk_15' type='checkbox' />15<br />
</form>
</div>

</body>
</html>