jquery $ .Post響應不加載到div

我想寫一個表單，當用戶提交點擊提交時，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'result'

非常感謝，

來源

2013-05-16 DotMat

會發生什麼？控制檯上是否有錯誤等？ –

你不能加載封裝在CDATA標籤中的xml嗎？ – karthikr

那麼，XML不是HTML，所以你可能需要將其轉換爲有效的HTML，然後再附加它。 –

您可以從中提取元素通過用它創建一個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-16 15:38:30 mccannf

工作過，非常感謝！ – DotMat

我有一個後續問題;表單現在提交，但提交按鈕現在被鎖定 - 我如何重新設置表單和提交按鈕，以便表單可以再次使用？ – DotMat

不確定你的意思是被鎖定。 [這個例子]（http://jsfiddle.net/yhLZJ/2/）一次又一次地爲我工作。 – mccannf

jquery $ .Post響應不加載到div

回答

相關問題