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

【问题标题】：Display XML file to HTML Text area将 XML 文件显示到 HTML 文本区域
【发布时间】：2013-08-15 15:49:22
【问题描述】：

有没有办法处理一个 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);
    }

});

我的文本区域中没有显示，控制台中也没有任何错误。

【问题讨论】：

您想在 1 个文本区域中完成所有内容吗？是的，有一种方法..它只取决于你希望它如何显示
是的，在一个文本区域中，将所有这些内容放入可编辑的文本区域是我需要的。我只需要该函数能够读取多个名称。 Contacts1.xml、Contacts2.xml 等
那么你尝试了什么？
真的，您想要的是允许用户编辑文本文件，然后将编辑后的文件重新保存到服务器的文件系统中？
@gibberish 是的，这就是我需要的。我认为 Ajax 是迄今为止唯一的方法。

标签： javascript jquery xml ajax

【解决方案1】：

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

whateveryouwant.php
another_php_file.php（要更改名称，您还必须更改 ajax 代码（2 处）
联系人.xml

工作原理：

第一个 ajax 代码块在 DOM 准备好后立即运行（注意：没有事件触发它，它只是运行。第二个代码块由点击事件触发）。 ajax 将此 POST 发送到名为 another_php_file.php 的 PHP 文件：req=load。这是一个 key=>value 关联数组：“req”是 var 名称，“load”是它的值。

现在，看看 another_php_file.php 内部发生了什么。启动时，该文件会检查它收到的 POST 变量。如果$_POST['req'] == 'load' 则从磁盘读取文件并回显它。这就是 AJAX 的工作原理：从指定的 PHP 处理器文件回显的任何内容都会在该 AJAX 代码块的 success: 函数中接收。

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>

另一个_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>

【讨论】：

Sweet，看起来像一个开始我非常感谢它。
这个胡言乱语还剩下什么？ //结束部分？
伙计，这太棒了。我讨厌你把所有的代码都给我看，但老实说，我真的很高兴你这样做了。对于我和其他任何偶然发现它的人。实际上将它附加到文本区域的是什么？再次，干得好。
伙计，向你致敬。祝您度过愉快的一周！
当然。与第二个完全一样：用$('#mubutt').click(function() { //AJAX 代码块包围它}。或者，假设您想创建另一个 ID="bonkers" 的按钮：$('#bonkers').click(function() { //AJAX 代码块 }。 Here are some more ajax examples 结帐（请点赞您认为有用的任何内容）。

【解决方案2】：

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

var textarea = $("#xml"); 

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

});

【讨论】：