Question

我有一个网站，用户可以在表格中输入一些信息。通过单击按钮，这些信息应存储在XML文档中并使用AJAX发送。

我已经尝试过这个来创建一个XML文档，但它没有用完。

var xmlDoc = '<?xml version="1.0" encoding="iso-8859-1"?>';
xmlDoc.append('<customer></customer>');

如何创建XML文档并附加更多节点和设置属性？

Answer 1

你不能在字符串上使用jQuery append方法，它会抛出js错误。

你可以尝试这样的事情。

var xmlDocument = $.parseXML("<root/>");
var foo = xmlDocument.createElement('foo');
foo.appendChild(document.createTextNode('bar'));
xmlDocument.documentElement.appendChild(foo);

其他方法是根据页面上提供的表格信息创建XML字符串，然后使用$.parseXML()方法创建XML文档。

Answer 2

jQuery不能为你处理这个吗？

var root = $('<ROOT></ROOT>');
root.append("<customer/>")
var customer = root.children().eq(0);
console.log(customer);
console.log(root.html());

输出：

[customer]
<customer></customer>

Answer 3

<!doctype html>
  <html>
    <head>
        <title>HTML to XML</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
        </script>
        <script type="text/javascript">

    $(document).on('ready', function() {
        $("#submitButton").on('click', function(e) {
            //This is where you construct the data you would like to save
            var fileDataToSave = $("#form1").serializeArray();
            //try catch block to catch the error if any.
            try {
                var xml = $($.parseXML('<?xml version="1.0" encoding="utf-8" ?><root />'));

                $(fileDataToSave).each(function(i, field) {
                    $('root', xml).append($('<' + field.name + ' />', xml).text(field.value));
                });

                //code to download xml format.
                var $downloadAnchor = $("<a/>", {
                    href: 'data:text/xml;charset=UTF-8,' + (new XMLSerializer()).serializeToString(xml.context),
                    download: "HelloWorld.xml"
                });
                $downloadAnchor.text("Click me to download XML");
                $("body").append($downloadAnchor);
                e.preventDefault();
            } catch (e) {
                document.write(e.message);
            }



        });
    });
            </script>
        </head>
        <body>
            <form id="form1">
                First name:
                <input id="btn1" type="text" name="FirstName">
                <br>Last name:
                <input id="btn2" type="text" name="LastName">
                <br>
                <button id="submitButton">submit</button>
            </form>
            <p>On Click of Submit, first name and last name should be stored XML file. 
            </p>
        </body>
    </html>

在jQuery中创建和发送XML文档

3 个答案: