Question

我正在尝试编写一个表单，当用户提交点击提交时，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'结果'

非常感谢，

Answer 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>

jquery $ .Post响应未加载到div中

1 个答案: