将XML文件显示到HTML文本区域

时间:2013-08-13 20:57:28

标签: javascript jquery xml ajax

有没有办法处理XML文件并显示它

<?xml version="1.0"?>
<phonebooks>
<contacts group_name="Sample" editable="1" id="0">
<contact first_name="Extension" last_name="1000" contact_type="sip" subscribe_t$
        <numbers>
                <number dial="1620" dial_prefix="" label="Extension" primary="1$
        </numbers>
</contact>
. . . 
</phonebooks>

这就是我需要它显示的文件,只是在文本区域,没什么特别的。我对大多数解决方案持开放态度。 这是我到目前为止尝试的内容

var textarea = $("#xml"); 

$.ajax({
    type: "GET",
    url: "http://localhost/contacts.xml",
    cache: false,
    dataType: "xml",
    success: function(xml) {
        var xmlText = new XMLSerializer().serializeToString(xml);
        textarea.text(xmlText);
    }

});

我的textarea中没有显示,控制台也没有任何错误。

2 个答案:

答案 0 :(得分:5)

这是一个完整的例子。只需将粘贴复制到三个名为:

的文件中

whateveryouwant.php
another_php_file.php(要更改名称,您还必须更改ajax代码(2个地方)
contacts.xml

工作原理:

第一个ajax代码块在DOM准备就绪后立即运行(注意:没有事件触发它,它只是运行。第二个代码块由click事件触发)。 ajax将此POST发送到名为 another_php_file.php req=load的PHP文件。这是一个key =&gt;值关联数组:“req”是var名称,“load”是其值。

现在,看看 another_php_file.php 中发生了什么。启动时,该文件检查它收到的POST变量。如果$_POST['req'] == 'load'则它从磁盘读取文件并将其ECHOes退出。这就是AJAX的工作原理:在AJAX代码块的success:函数中接收到来自指定PHP处理器文件的回应。

xml文本如何进入textarea控件?再看一下第一个AJAX代码块。请记住,在成功函数内部接收来自PHP处理器文件的数据?这是魔术:

success: function(result) {
    $('textarea').val(result);
}

result是一个变量(可以命名它),包含PHP文件所回应的内容。然后我们使用jQuery将result粘贴到textarea控件中。

请注意,我没有为该textarea控件指定ID。此代码假定您的页面上只有一个。如果您有多个,那么您将通过其ID引用所需的textarea控件:

    $('#myText').val(result);

HTML:

<head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                $.ajax({
                    type: 'POST',
                    url: 'another_php_file.php',
                    data: 'req=load',
                    success: function(result) {
                        //alert(result);
                        $('textarea').val(result);
                    }
                });

                $('#mybutt').click(function() {
                    var stuff = $('textarea').val();
                    alert(stuff);
                    $.ajax({
                        type: 'POST',
                        url: 'another_php_file.php',
                        data: 'req=save&changes=' +stuff,
                        success: function(result) {
                            alert(result);
                            //$('textarea').val(result);
                        }
                    });
                });

            }); //END $(document).ready()

        </script>
    </head>
<html>
    <body>
        <input type="button" value="Save Changes" id="mybutt" />
        <textarea id='myText'  rows="30" cols="120" value='<?php echo $xml; ?>' />
    </body>
</html>

<强> another_php_file.php

<?php

//This necessary to prevent AJAX from automatically ESCAPING all values (e.g. "Bob" is turned into \"Bob\" )
//See http://stackoverflow.com/questions/4550036/jquery-is-automatically-escaping-ajax
if (get_magic_quotes_gpc()) {
    $process = array(&$_GET, &$_POST, &$_COOKIE, &$_REQUEST);
    while (list($key, $val) = each($process)) {
        foreach ($val as $k => $v) {
            unset($process[$key][$k]);
            if (is_array($v)) {
                $process[$key][stripslashes($k)] = $v;
                $process[] = &$process[$key][stripslashes($k)];
            } else {
                $process[$key][stripslashes($k)] = stripslashes($v);
            }
        }
    }
    unset($process);
}

if ($_POST['req'] == 'load') {
    $xml = file_get_contents("contacts.xml");
    echo $xml;

}else if ($_POST['req'] == 'save') {
    $d = $_POST['changes'];
    //echo $d;
    $size = file_put_contents('contacts.xml', $d);
    echo 'Wrote ' .$size. ' bytes to file. Refresh page with [Ctrl]+[F5] to see your changes.';
}

<强> contacts.xml

<?xml version="1.0"?>
<phonebooks>
<contacts group_name="Dimple" editable="1" id="0">
<contact first_name="Extension" last_name="1000" contact_type="sip">
        <numbers>
            <number dial="1620" dial_prefix="" label="Extension" primary="1">
        </numbers>
</contact>
<contact first_name="George" last_name="Smith" contact_type="sip">
        <numbers>
            <number dial="1700" dial_prefix="" label="Extension" primary="1">
        </numbers>
</contact>
</phonebooks>

答案 1 :(得分:0)

您应该在ajax请求中将dataType设置为"text"并将contentType设置为"text/plain",因为您将结果视为文本。您的ajax请求代码如下所示:

&#13;
&#13;
var textarea = $("#xml"); 

$.ajax({
    type: "GET",
    url: "http://localhost/contacts.xml",
    cache: false,
    contextType: "text/plain",
    dataType: "text",
    success: function(xml) {
        textarea.text(xml);
    }

});
&#13;
&#13;
&#13;