0

我正在尝试编写一个表单，当用户提交点击提交时，ajax 会将数据添加到表单下方的 div 中。我已经制作了 html 表单，并且没有任何 jquery，您可以使用 POST 提交表单，服务器上的相应 php 会吐出一个带有答案的小型 XML 文档。

我不知道该怎么做是让 jquery 将 XML 文档中的数据放入 div 内的 html 标记中。

返回的 XML 如下所示：

    <?xml version="1.0"?>
    <url_shortener>
    <shortlink>http://newshorterlink.com/2</shortlink> 
    <longlink>Apple.com</longlink> 
    </url_shortener>

html 表单如下所示：

        <script type="text/javascript">
        $(document).ready(function(){
            $("#url_shorten_form").submit( function () {    
              $.post(
               'post_linkme.php',
                $(this).serialize(),
                function(data){
                  $("#result").html(data)
                },
                "xml"
              );
              return false;   
            });   
        });
</script>

</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
    <div id="header" data-theme="a" data-role="header" class="header">
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content">
        <!-- Form to shorten URL -->
        <form id="url_shorten_form" action="" method="POST" class="url_shorten_form">
            <div data-role="fieldcontain" class="long_url">
                <label for="long_url">URL To Shorten</label>
                <input name="long_url" id="long_url" placeholder="http://www.reallylongurl.com" value="" type="text">
            </div>
            <div data-role="fieldcontain" class="qr_generate">
                <label for="qr_generate">Generate QR Code?</label>
                <select name="qr_generate" id="qr_generate" data-theme="" data-role="slider" data-mini="true">
                    <option value="0">No</option>
                    <option value="1">Yes</option>
                </select>
            </div>
    <input form="url_shorten_form" id="submit" type="submit" value="Submit" class="submit">
        </form>
        <!-- Response displaying new short url and QR Code if required -->
        <div id="result" data-theme="a" class="result">
        This Text to be replaced
        </div>

我不明白我需要做什么才能解析 XML，然后将其呈现到 div“结果”中

非常感谢，

4

1 回答 1

1

您可以通过创建一个 JQuery 对象从 XML 中提取元素。例如创建一个链接：

<script type="text/javascript">
        $(document).ready(function(){
            $("#url_shorten_form").submit( function () {    
              $.post(
               'post_linkme.php',
                $(this).serialize(),
                function(data){
                  var shortLink = $(data).find("shortlink").text();
                  var longLink = $(data).find("longlink").text();
                  var link=$("<a></a>").attr("href",shortLink).text(longLink);
                  $("#result").html(link);
                },
                "xml"
              );
              return false;   
            });   
        });
</script>
于 2013-05-16T15:38:30.143 回答