沒有嵌套的DIV，JQuery AJAX將無法工作，爲什麼？

想象一下以下的index.php：沒有嵌套的DIV，JQuery AJAX將無法工作，爲什麼？

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
</head> 
<body> 

    <form id="MY_FORM" action="./index.php" method="get"> 
     <input name="var_name"> 
     <input type="submit"> 
    </form> 

    <!-- <div> --> 
    <div id="MY_CONTENT"> 
     <?php 
      var_dump($_GET); 
     ?> 
    </div> 
    <!-- </div> --> 

    <script type="text/javascript"> 

     $('#MY_FORM').submit(function() 
     { 
      var form = $(this); 
      $.get('./', form.serialize(), function(data) 
      { 
       var updated = $('#MY_CONTENT', data); 
       $('#MY_CONTENT').replaceWith(updated); 
      }); 
      return false; 
     }); 

    </script> 

</body> 
</html>

有一個簡單的AJAX形式。當這個表單被引用時，MY_CONTENT應該用AJAX刷新（因此表單的action =「./ index.php」）。問題：我發現代碼只有當MY_CONTENT div被封閉在另一個div中時才起作用。

我把

<!-- <div> --> 
<!-- </div> -->

周圍MY_CONTENT。這必須更改爲div才能使腳本正常工作。
爲什麼MY_CONTENT必須包裝在一個div中？

來源

2013-03-04 jozop

發生這種情況是因爲data包含的所有元素都是頭部和身體標記的子元素，而不是頭部/身體本身。您可以通過使用

var updated = $(data).filter("#MY_CONTENT")

，而不是因爲它是你擺脫包裝後body標籤的直接子擺脫了包裝的。

另一個解決方案（正如FabrícioMatté所指出的）是隻在請求是ajax請求時才返回目標html。

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && Strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { 
    var_dump($_GET); 
} 
else { 
    ... rest of your page ...

那麼你可以做

$('#MY_CONTENT').html(data);

來源

2013-03-04 22:38:39

是的，或者你可以呼應標記將要來裏面的內容div並直接應用'.html（）'。 – 2013-03-04 22:40:10

當然，它需要通過Ajax發送一個額外的參數來區分ajax提交和常規加載，+1爲連貫的答案。 – 2013-03-04 22:41:38

@FabrícioMatté，除非你檢查頭文件，:) – 2013-03-04 22:46:06

更換

var updated = $('#MY_CONTENT', data); 
$('#MY_CONTENT').replaceWith(updated);

由：

$('#MY_CONTENT').html(data);

來源

2013-03-04 22:39:45

沒有嵌套的DIV，JQuery AJAX將無法工作，爲什麼？

回答

相關問題