没有嵌套的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将无法工作，为什么？

回答

相关问题